spotlight card

1import React from "react";
2import { CardShell } from "./CardShell";
3
4interface SpotlightCardProps {
5  title: string;
6  subtitle?: string;
7  eyebrow?: string;
8  icon?: React.ReactNode;
9  actions?: React.ReactNode;
10  children?: React.ReactNode;
11  theme?: "light" | "dark";
12  size?: "sm" | "md" | "lg";
13  className?: string;
14}
15
16const paddingBySize: Record<NonNullable<SpotlightCardProps["size"]>, string> = {
17  // Feature cards pad 32px whatever their size; only the type scales
18  sm: "p-6",
19  md: "p-8",
20  lg: "p-8",
21};
22
23const titleSizeBySize: Record<
24  NonNullable<SpotlightCardProps["size"]>,
25  string
26> = {
27  sm: "text-[20px]",
28  md: "text-[26px]",
29  lg: "text-[34px]",
30};
31
32export function SpotlightCard({
33  title,
34  subtitle,
35  eyebrow,
36  icon,
37  actions,
38  children,
39  theme = "dark",
40  size = "md",
41  className = "",
42}: SpotlightCardProps) {
43  const dark = theme === "dark";
44
45  return (
46    /* Built on CardShell: icon at the top of the face, words and actions
47       settled at the bottom — the same rhythm as Card and QuoteCard. */
48    <CardShell as="article" theme={theme} className={className}>
49      {/* Headline sits low on the face, so tall cards breathe above it, not below */}
50      <div className={["relative flex-1 flex flex-col gap-3", paddingBySize[size]].join(" ")}>
51        {icon && (
52          <div
53            className={[
54              "w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
55              dark ? "text-white" : "text-neutral-800",
56            ].join(" ")}
57            style={{
58              background: dark ? "var(--tile-dark)" : "var(--face-light)",
59              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
60            }}
61          >
62            {icon}
63          </div>
64        )}
65
66        {eyebrow && (
67          <p
68            className={[
69              // Without an icon above to push it down, the copy still sits low
70              icon ? "pt-8" : "mt-auto",
71              "text-[14px] font-medium tracking-[-0.01em]",
72              dark ? "text-neutral-400" : "text-neutral-500",
73            ].join(" ")}
74          >
75            {eyebrow}
76          </p>
77        )}
78
79        <h3
80          className={[
81            titleSizeBySize[size],
82            !icon && !eyebrow ? "mt-auto" : "",
83            "font-medium leading-[1.12] tracking-[-0.03em] text-balance",
84            dark ? "text-white" : "text-neutral-900",
85          ].join(" ")}
86        >
87          {title}
88        </h3>
89
90        {subtitle && (
91          <p
92            className={[
93              "text-[15px] leading-[1.6] max-w-lg text-pretty",
94              dark ? "text-neutral-400" : "text-neutral-600",
95            ].join(" ")}
96          >
97            {subtitle}
98          </p>
99        )}
100
101        {children}
102        {actions && <div className="pt-4 flex items-center gap-2">{actions}</div>}
103      </div>
104    </CardShell>
105  );
106}

1import React from "react";
2
3type Theme = "light" | "dark";
4
5interface CardShellProps {
6  theme?: Theme;
7  /** Controls and context: actions, attribution, deltas. Lives on the chassis. */
8  rail?: React.ReactNode;
9  /** "actions" for buttons; "text" for plain context, indented to the face's text edge */
10  railKind?: "actions" | "text";
11  as?: "div" | "figure" | "article";
12  className?: string;
13  faceClassName?: string;
14  children: React.ReactNode;
15}
16
17/* Every card is built like every other object in the kit: a chassis (bezel)
18   holding a face. Content goes on the face; controls and context go on the
19   rail, the strip of chassis below it. The two are nearly the same tone —
20   the hairline around the face is what separates them.
21
22   Geometry, measured from the card's outer edge:
23   - chassis 24px radius, 6px bezel → face 18px radius (concentric)
24   - rail content sits 12px in from the left and bottom, 10px below the face
25   - a button's label then starts 30px in — the same edge as the face's text,
26     and plain-text rails are indented to that edge too                     */
27export function CardShell({
28  theme = "light",
29  rail,
30  railKind = "actions",
31  as: Tag = "div",
32  className = "",
33  faceClassName = "",
34  children,
35}: CardShellProps) {
36  const dark = theme === "dark";
37
38  return (
39    <Tag
40      className={[
41        "rim relative m-0 rounded-[24px] p-1.5 flex flex-col h-full",
42        rail ? "pb-0" : "",
43        className,
44      ].join(" ")}
45      style={{
46        background: dark ? "var(--card-bezel-dark)" : "var(--card-bezel-light)",
47        boxShadow: dark ? "var(--card-dark-shadow)" : "var(--card-light-shadow)",
48        ["--rim" as string]: dark ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,1)",
49      } as React.CSSProperties}
50    >
51      <div
52        className={["relative flex-1 min-h-0 rounded-[18px] overflow-hidden flex flex-col", faceClassName].join(" ")}
53        style={{
54          background: dark ? "var(--card-dark)" : "var(--card-light)",
55          boxShadow: dark ? "var(--card-face-dark-shadow)" : "var(--card-face-light-shadow)",
56        }}
57      >
58        {children}
59      </div>
60
61      {rail && (
62        <div className="relative shrink-0 px-1.5 pt-2.5 pb-3">
63          <div
64            className={[
65              // 40px = a small button's full height, so text rails and button
66              // rails come out the same height and line up across a row
67              "min-h-10 flex items-center gap-2 text-[12.5px]",
68              railKind === "text" ? "pl-[18px] pr-3 gap-2.5" : "",
69              dark ? "text-neutral-400" : "text-neutral-500",
70            ].join(" ")}
71          >
72            {rail}
73          </div>
74        </div>
75      )}
76    </Tag>
77  );
78}