Testimonial

import type { ComponentProps, ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-testimonial-width) max-w-full flex-col gap-(--tui-testimonial-gap) rounded-(--tui-testimonial-radius) bg-(--tui-testimonial-bg) p-(--tui-testimonial-padding) font-(family-name:--tui-font) text-(length:--tui-testimonial-font-size) leading-none text-(--tui-testimonial-fg) shadow-(--tui-testimonial-shadow)",
  well: "rounded-[calc(var(--tui-testimonial-radius)_-_var(--tui-testimonial-padding))] bg-(--tui-testimonial-well)",
  row: "flex min-h-(--tui-testimonial-row-height) items-center gap-3 rounded-[calc(var(--tui-testimonial-radius)_-_var(--tui-testimonial-padding))] px-3 py-2 transition-colors duration-(--tui-duration)",
  meta: "ml-auto shrink-0 pl-2 text-[0.93em] text-(--tui-testimonial-muted) tabular-nums",
  detail: "text-[0.93em] leading-snug text-(--tui-testimonial-muted)",
};

const initials = (name: string) =>
  name
    .split(/\s+/)
    .map((part) => part[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

export interface TestimonialProps extends Omit<ComponentProps<"figure">, "children" | "role"> {
  /** What they said. */
  children: ReactNode;
  name: string;
  /** What they do. */
  role?: ReactNode;
  /** A picture of them. Without one, their initials are drawn. */
  avatar?: ReactNode;
  /** Where they work, at the end of the row. */
  company?: ReactNode;
}

/** What one person said, in a tile, with who they are in a row under it. */
export function Testimonial({ children, name, role, avatar, company, className, ...props }: TestimonialProps) {
  return (
    <figure data-slot="testimonial" {...props} className={["m-0", air.panel, className].filter(Boolean).join(" ")}>
      <blockquote data-slot="testimonial-quote" className={"m-0 p-(--tui-testimonial-quote-padding) text-(length:--tui-testimonial-quote-size) leading-[1.5] font-medium tracking-[-0.01em] text-pretty " + air.well}>
        {children}
      </blockquote>
      <figcaption className={air.row}>
        <span aria-hidden data-slot="testimonial-avatar" className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--tui-testimonial-well) text-[0.8em] font-semibold [&_img]:size-full [&_img]:object-cover">
          {avatar ?? initials(name)}
        </span>
        <span className="flex min-w-0 flex-col gap-1.5">
          <span className="truncate font-medium">{name}</span>
          {role && <span className={"truncate " + air.detail}>{role}</span>}
        </span>
        {company && <span className={air.meta}>{company}</span>}
      </figcaption>
    </figure>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Testimonial */
  --tui-testimonial-width: 380px;
  --tui-testimonial-padding: calc(var(--tui-space) * 2);
  --tui-testimonial-gap: calc(var(--tui-space) * 1.5);
  --tui-testimonial-radius: calc(var(--tui-radius) * 3.25);
  --tui-testimonial-font-size: var(--tui-text);
  --tui-testimonial-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-testimonial-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-testimonial-fg: var(--tui-fg);
  --tui-testimonial-muted: var(--tui-muted-fg);
  --tui-testimonial-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-testimonial-row-height: calc(var(--tui-space) * 14);
  --tui-testimonial-quote-padding: calc(var(--tui-space) * 5);
  --tui-testimonial-quote-size: calc(var(--tui-text) + 3px);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}