author card

1import React from "react";
2import { Avatar } from "./Avatar";
3import { Button } from "./Button";
4
5interface AuthorCardProps {
6  name: string;
7  bio?: string;
8  avatarSrc?: string;
9  onFollow?: () => void;
10  className?: string;
11}
12
13export function AuthorCard({
14  name,
15  bio,
16  avatarSrc,
17  onFollow,
18  className = "",
19}: AuthorCardProps) {
20  return (
21    <div
22      className={[
23        "rim relative rounded-[22px] p-1.5",
24        className,
25      ]
26        .filter(Boolean)
27        .join(" ")}
28      style={{ background: "var(--panel-bezel)", boxShadow: "var(--card-light-shadow)" }}
29    >
30      <div className="relative bg-white rounded-[17px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
31        {/* Cover: a sunken well, so the avatar visibly sits on top of it */}
32        <div
33          aria-hidden
34          className="h-20 relative overflow-hidden"
35          style={{
36            background:
37              "radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,0.7), transparent 60%), linear-gradient(180deg, #ececeb 0%, #f4f4f3 100%)",
38            boxShadow: "inset 0 1px 3px rgba(17,17,17,0.06), inset 0 -2px 3px -2px rgba(17,17,17,0.05)",
39          }}
40        />
41        <div className="px-6 pb-6">
42          <div className="-mt-8 mb-4">
43            <Avatar
44              src={avatarSrc}
45              name={name}
46              size="lg"
47              className="ring-[3.5px] ring-white shadow-[0_3px_12px_-2px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]"
48            />
49          </div>
50          <div className="flex items-start justify-between gap-4">
51            <div className="flex-1 min-w-0">
52              <p className="text-[15px] font-semibold text-neutral-900 leading-snug truncate tracking-[-0.01em]">{name}</p>
53              {bio && (
54                <p className="text-[13px] text-neutral-500 leading-relaxed mt-1 line-clamp-2">{bio}</p>
55              )}
56            </div>
57            {onFollow && (
58              <Button variant="primary" size="sm" onClick={onFollow} className="shrink-0">
59                follow
60              </Button>
61            )}
62          </div>
63        </div>
64      </div>
65    </div>
66  );
67}

1import React from "react";
2
3type AvatarSize = "sm" | "md" | "lg";
4
5interface AvatarProps {
6  src?: string;
7  alt?: string;
8  name?: string;
9  size?: AvatarSize;
10  className?: string;
11}
12
13const sizeStyles: Record<AvatarSize, string> = {
14  sm: "w-7 h-7 text-[10px]",
15  md: "w-9 h-9 text-[12px]",
16  lg: "w-12 h-12 text-[14px]",
17};
18
19function getInitials(name: string): string {
20  return name
21    .split(" ")
22    .map((w) => w[0])
23    .slice(0, 2)
24    .join("")
25    .toLowerCase();
26}
27
28export function Avatar({
29  src,
30  alt = "",
31  name,
32  size = "md",
33  className = "",
34}: AvatarProps) {
35  const initials = name ? getInitials(name) : "?";
36
37  return (
38    <div
39      className={[
40        "relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-neutral-600 select-none",
41        sizeStyles[size],
42        className,
43      ]
44        .filter(Boolean)
45        .join(" ")}
46      style={{ background: "var(--face-light)" }}
47    >
48      {src ? (
49        // eslint-disable-next-line @next/next/no-img-element
50        <img src={src} alt={alt || name || ""} loading="lazy" className="w-full h-full object-cover" />
51      ) : (
52        <span role="img" aria-label={name ?? "Unknown"}>{initials}</span>
53      )}
54      <span
55        aria-hidden
56        className="pointer-events-none absolute inset-0 rounded-full"
57        style={{
58          boxShadow: "inset 0 2px 3px -2px rgba(255,255,255,0.45), inset 0 0 2px rgba(17,17,17,0.12), inset 0 -2px 3px -2px rgba(17,17,17,0.04)",
59        }}
60      />
61    </div>
62  );
63}
64
65interface AvatarGroupProps {
66  children: React.ReactNode;
67  max?: number;
68  size?: AvatarSize;
69  className?: string;
70}
71
72const overlapStyles: Record<AvatarSize, string> = {
73  sm: "-ml-2",
74  md: "-ml-2.5",
75  lg: "-ml-3",
76};
77
78export function AvatarGroup({
79  children,
80  max = 5,
81  size = "md",
82  className = "",
83}: AvatarGroupProps) {
84  const items = React.Children.toArray(children);
85  const visible = items.slice(0, max);
86  const overflow = items.length - max;
87
88  return (
89    <div className={["flex items-center", className].join(" ")}>
90      {visible.map((child, i) => (
91        <div
92          key={i}
93          className={[
94            "ring-2 ring-white rounded-full",
95            i > 0 ? overlapStyles[size] : "",
96          ].join(" ")}
97        >
98          {child}
99        </div>
100      ))}
101      {overflow > 0 && (
102        <div
103          className={[
104            "ring-2 ring-white rounded-full flex items-center justify-center font-semibold text-neutral-600 select-none",
105            overlapStyles[size],
106            sizeStyles[size],
107          ].join(" ")}
108          style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
109          aria-label={`${overflow} more`}
110        >
111          +{overflow}
112        </div>
113      )}
114    </div>
115  );
116}

1"use client";
2
3import React, { useState, useRef, useCallback } from "react";
4
5type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
6type ButtonSize = "sm" | "md" | "lg" | "icon";
7
8interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  variant?: ButtonVariant;
10  size?: ButtonSize;
11  children: React.ReactNode;
12  fullWidth?: boolean;
13  /** Surface the button sits on. On dark cards, secondary/outline switch to a
14      dark face so they don't glare against the card. */
15  tone?: "light" | "dark";
16  /** Equal width and height, for icon-only layered buttons. */
17  square?: boolean;
18}
19
20/* Layered buttons are a raised face seated in a machined bezel. The bezel
21   never moves; the face lifts on hover and sinks flush when pressed.      */
22const shellConfig: Record<
23  string,
24  {
25    bezel: string;
26    bezelShadow: string;
27    face: string;
28    faceShadow: string;
29    faceHoverShadow: string;
30    facePressedShadow: string;
31    text: string;
32    textShadow: string;
33    fill: string;
34  }
35> = {
36  primary: {
37    bezel: "var(--bezel-dark)",
38    bezelShadow: "var(--bezel-dark-shadow)",
39    face: "var(--face-dark)",
40    faceShadow: "var(--face-dark-shadow)",
41    faceHoverShadow:
42      "0 0 3px rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.135), inset 0 -2px 3px -2px rgba(0,0,0,0.25)",
43    facePressedShadow: "var(--face-dark-pressed)",
44    text: "text-white",
45    textShadow: "0 -1px 0 rgba(0,0,0,0.45)",
46    fill: "bg-white/[0.05]",
47  },
48  secondary: {
49    bezel: "var(--bezel-light)",
50    bezelShadow: "var(--bezel-light-shadow)",
51    face: "var(--face-light)",
52    faceShadow: "var(--face-light-shadow)",
53    faceHoverShadow:
54      "0 0 3px rgba(17,17,17,0.136), 0 2px 3px rgba(17,17,17,0.1), 0 4px 8px -2px rgba(17,17,17,0.08), inset 0 2px 3px -2px rgba(255,255,255,1), inset 0 -2px 3px -2px rgba(17,17,17,0.035)",
55    facePressedShadow: "var(--face-light-pressed)",
56    text: "text-neutral-800",
57    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
58    fill: "bg-neutral-900/[0.025]",
59  },
60  outline: {
61    bezel: "linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(17,17,17,0.04) 100%)",
62    bezelShadow:
63      "0 0 0 0.5px rgba(17,17,17,0.048), inset 0 2px 3px -2px rgba(255,255,255,0.45)",
64    face: "var(--face-light)",
65    faceShadow:
66      "0 0 3px rgba(17,17,17,0.102), 0 1px 1px rgba(17,17,17,0.06), inset 0 2px 3px -2px rgba(255,255,255,1)",
67    faceHoverShadow:
68      "0 0 3px rgba(17,17,17,0.136), 0 1px 2px rgba(17,17,17,0.08), 0 3px 6px -2px rgba(17,17,17,0.06), inset 0 2px 3px -2px rgba(255,255,255,1)",
69    facePressedShadow: "var(--face-light-pressed)",
70    text: "text-neutral-700",
71    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
72    fill: "bg-neutral-900/[0.025]",
73  },
74};
75
76/* Secondary on a dark surface: a raised face a few steps lighter than the
77   card — present, but in the same family of tones.                       */
78const darkSecondary = {
79  bezel: "linear-gradient(180deg, #2a2a2a 0%, #161616 100%)",
80  bezelShadow:
81    "0 0 0 0.5px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.053)",
82  face: "linear-gradient(180deg, #353535 0%, #2a2a2a 55%, #242424 100%)",
83  faceShadow:
84    "0 0 3px rgba(0,0,0,0.35), 0 1px 1.5px rgba(0,0,0,0.4), inset 0 2px 3px -2px rgba(255,255,255,0.09), inset 0 -2px 3px -2px rgba(0,0,0,0.2)",
85  faceHoverShadow:
86    "0 0 3px rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.12), inset 0 -2px 3px -2px rgba(0,0,0,0.2)",
87  facePressedShadow: "var(--face-dark-pressed)",
88  text: "text-neutral-100",
89  textShadow: "0 -1px 0 rgba(0,0,0,0.4)",
90  fill: "bg-white/[0.04]",
91};
92
93/* Flat buttons (ghost, icon) are a single face without a bezel. */
94const flatConfig: Record<
95  ButtonVariant,
96  {
97    bg: string;
98    background?: string;
99    fill: string;
100    shadow: string;
101    hoverShadow: string;
102    pressedShadow: string;
103  }
104> = {
105  primary: {
106    bg: "text-white",
107    background: "var(--face-dark)",
108    fill: "bg-white/[0.08]",
109    shadow: "var(--face-dark-shadow)",
110    hoverShadow:
111      "0 0 3px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4), 0 6px 14px -4px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.135)",
112    pressedShadow: "var(--face-dark-pressed)",
113  },
114  secondary: {
115    bg: "text-neutral-800",
116    background: "var(--face-light)",
117    fill: "bg-neutral-900/[0.035]",
118    shadow: "var(--face-light-shadow)",
119    hoverShadow:
120      "0 0 3px rgba(17,17,17,0.136), 0 2px 4px rgba(17,17,17,0.08), 0 6px 14px -4px rgba(17,17,17,0.1), inset 0 2px 3px -2px rgba(255,255,255,1)",
121    pressedShadow: "var(--face-light-pressed)",
122  },
123  ghost: {
124    bg: "bg-transparent text-neutral-500 hover:text-neutral-800",
125    fill: "bg-neutral-900/[0.05]",
126    shadow: "none",
127    hoverShadow: "inset 0 0 2px rgba(17,17,17,0.09)",
128    pressedShadow: "inset 0 1px 2px rgba(17,17,17,0.08)",
129  },
130  outline: {
131    bg: "bg-transparent text-neutral-700",
132    fill: "bg-neutral-900/[0.035]",
133    shadow: "inset 0 0 2px rgba(17,17,17,0.15)",
134    hoverShadow:
135      "inset 0 0 2px rgba(17,17,17,0.24), 0 1px 2px rgba(17,17,17,0.05)",
136    pressedShadow:
137      "inset 0 0 2px rgba(17,17,17,0.24), inset 0 1px 2px rgba(17,17,17,0.06)",
138  },
139};
140
141/* Bezel radius minus bezel padding = face radius, so the curves stay concentric. */
142const shellRadius: Record<ButtonSize, string> = {
143  sm: "rounded-[12px] p-[3px]",
144  md: "rounded-[13px] p-[3px]",
145  lg: "rounded-[15px] p-[3.5px]",
146  icon: "",
147};
148
149const faceRadius: Record<ButtonSize, string> = {
150  sm: "rounded-[9px]",
151  md: "rounded-[10px]",
152  lg: "rounded-[11.5px]",
153  icon: "",
154};
155
156const innerPadding: Record<ButtonSize, string> = {
157  sm: "px-4 py-2 text-[13px]",
158  md: "px-5 py-2.5 text-sm",
159  lg: "px-7 py-3 text-[15px]",
160  icon: "w-7 h-7 p-0 text-[13px]",
161};
162
163const squarePadding: Record<ButtonSize, string> = {
164  sm: "w-9 h-9 p-0 text-[13px]",
165  md: "w-10 h-10 p-0 text-sm",
166  lg: "w-12 h-12 p-0 text-[15px]",
167  icon: "",
168};
169
170const flatSizeStyles: Record<ButtonSize, string> = {
171  sm: "px-4 py-2.5 text-[13px] rounded-[10px]",
172  md: "px-5 py-3 text-sm rounded-[10px]",
173  lg: "px-7 py-3.5 text-[15px] rounded-xl",
174  icon: "w-8 h-8 p-0 rounded-[10px] text-[13px]",
175};
176
177export function Button({
178  variant = "primary",
179  size = "md",
180  fullWidth = false,
181  tone = "light",
182  square = false,
183  className = "",
184  children,
185  disabled,
186  onClick,
187  onPointerDown,
188  onPointerUp,
189  onPointerLeave,
190  onPointerCancel,
191  onPointerEnter,
192  style,
193  ...rest
194}: ButtonProps) {
195  const [pressed, setPressed] = useState(false);
196  const [hovered, setHovered] = useState(false);
197  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
198
199  /* The press state is the button's own; handlers passed in run alongside
200     it rather than replacing it                                        */
201  const handlePointerDown = useCallback(
202    (e: React.PointerEvent<HTMLButtonElement>) => {
203      if (timerRef.current) clearTimeout(timerRef.current);
204      setPressed(true);
205      onPointerDown?.(e);
206    },
207    [onPointerDown],
208  );
209
210  const handlePointerUp = useCallback(
211    (e: React.PointerEvent<HTMLButtonElement>) => {
212      timerRef.current = setTimeout(() => setPressed(false), 150);
213      onPointerUp?.(e);
214    },
215    [onPointerUp],
216  );
217
218  const handlePointerCancel = useCallback(
219    (e: React.PointerEvent<HTMLButtonElement>) => {
220      timerRef.current = setTimeout(() => setPressed(false), 150);
221      onPointerCancel?.(e);
222    },
223    [onPointerCancel],
224  );
225
226  const handlePointerLeave = useCallback(
227    (e: React.PointerEvent<HTMLButtonElement>) => {
228      setHovered(false);
229      if (timerRef.current) clearTimeout(timerRef.current);
230      timerRef.current = setTimeout(() => setPressed(false), 150);
231      onPointerLeave?.(e);
232    },
233    [onPointerLeave],
234  );
235
236  const layered = variant !== "ghost" && size !== "icon";
237
238  const handlers = {
239    onClick,
240    onPointerDown: handlePointerDown,
241    onPointerUp: handlePointerUp,
242    onPointerLeave: handlePointerLeave,
243    onPointerCancel: handlePointerCancel,
244    onPointerEnter: (e: React.PointerEvent<HTMLButtonElement>) => {
245      setHovered(true);
246      onPointerEnter?.(e);
247    },
248  };
249
250  if (layered) {
251    const cfg =
252      tone === "dark" && (variant === "secondary" || variant === "outline")
253        ? darkSecondary
254        : shellConfig[variant];
255    const faceShadow = pressed
256      ? cfg.facePressedShadow
257      : hovered
258        ? cfg.faceHoverShadow
259        : cfg.faceShadow;
260
261    return (
262      <button
263        data-btn
264        className={[
265          "group/btn relative inline-flex cursor-pointer select-none whitespace-nowrap",
266          shellRadius[size],
267          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
268          "disabled:opacity-40 disabled:pointer-events-none",
269          fullWidth ? "w-full" : "",
270          className,
271        ]
272          .filter(Boolean)
273          .join(" ")}
274        style={{
275          background: cfg.bezel,
276          boxShadow: cfg.bezelShadow,
277          ...style,
278        }}
279        disabled={disabled}
280        {...handlers}
281        {...rest}
282      >
283        <span
284          className={[
285            "btn-face relative overflow-hidden flex items-center justify-center gap-1.5 font-medium",
286            faceRadius[size],
287            cfg.text,
288            square ? squarePadding[size] : ["w-full", innerPadding[size]].join(" "),
289          ].join(" ")}
290          style={{
291            background: cfg.face,
292            boxShadow: faceShadow,
293            textShadow: cfg.textShadow,
294            transform: pressed
295              ? "translateY(0.5px) scale(0.985)"
296              : hovered
297                ? "translateY(-0.5px)"
298                : "none",
299            transition:
300              "transform 240ms var(--ease-spring), box-shadow 200ms ease-out",
301          }}
302        >
303          <span
304            aria-hidden="true"
305            className={[
306              "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
307              pressed
308                ? "scale-y-100"
309                : "scale-y-0 group-hover/btn:scale-y-100",
310              cfg.fill,
311            ].join(" ")}
312          />
313          <span className="btn-icon-nudge relative z-10 inline-flex items-center gap-1.5">
314            {children}
315          </span>
316        </span>
317      </button>
318    );
319  }
320
321  const cfg = flatConfig[variant];
322  const currentShadow = pressed
323    ? cfg.pressedShadow
324    : hovered
325      ? cfg.hoverShadow
326      : cfg.shadow;
327
328  return (
329    <button
330      data-btn
331      className={[
332        "btn-face group/btn relative overflow-hidden inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer select-none whitespace-nowrap",
333        "transition-colors duration-200 ease-out",
334        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
335        "disabled:opacity-40 disabled:pointer-events-none",
336        cfg.bg,
337        flatSizeStyles[size],
338        fullWidth ? "w-full" : "",
339        className,
340      ]
341        .filter(Boolean)
342        .join(" ")}
343      style={{
344        background: cfg.background,
345        boxShadow: currentShadow,
346        transform: pressed
347          ? "translateY(0.5px) scale(0.97)"
348          : hovered && cfg.background
349            ? "translateY(-0.5px)"
350            : "none",
351        transition:
352          "transform 240ms var(--ease-spring), box-shadow 200ms ease-out, color 200ms ease-out",
353        ...style,
354      }}
355      disabled={disabled}
356      {...handlers}
357      {...rest}
358    >
359      <span
360        aria-hidden="true"
361        className={[
362          "pointer-events-none absolute inset-0 origin-bottom transition-transform duration-300 ease-out",
363          pressed ? "scale-y-100" : "scale-y-0 group-hover/btn:scale-y-100",
364          cfg.fill,
365        ].join(" ")}
366      />
367      <span className="relative z-10 inline-flex items-center gap-1.5">
368        {children}
369      </span>
370    </button>
371  );
372}