Case Study Tabs

1"use client";
2 
3import * as React from "react";
4import Link from "next/link";
5import { ChevronRight, Star } from "lucide-react";
6import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
7import { cn } from "@/lib/utils";
8 
9/* ── types ───────────────────────────────────────────────────── */
10 
11export interface CaseStudyTabsBrand {
12  /** Unique tab id. */
13  id: string;
14  /** Accessible label for screen readers. */
15  name: string;
16  /** Logo node — typically an inline SVG. */
17  logo: React.ReactNode;
18  /** CSS color string used for the animated underline indicator. Defaults to `currentColor`. */
19  accentColor?: string;
20}
21 
22export interface CaseStudyAuthor {
23  name: string;
24  role: string;
25  /** Image URL for the avatar. */
26  avatarUrl?: string;
27  /** Initials/letter fallback when `avatarUrl` is omitted. */
28  avatarFallback?: string;
29}
30 
31export interface CaseStudy {
32  brand: CaseStudyTabsBrand;
33  /** Featured headline paragraph rendered in large type. Omit to render testimonial-only. */
34  headline?: React.ReactNode;
35  /** Optional "Read case study" CTA. */
36  cta?: { label: string; href: string };
37  /** Pull-quote rendered with curly-quote pseudo-elements. */
38  quote: React.ReactNode;
39  author: CaseStudyAuthor;
40}
41 
42export interface CaseStudyTabsProps {
43  cases: CaseStudy[];
44  defaultCaseId?: string;
45  /** Decorative embossed stars rendered above the tab bar. Set to 0 to hide. */
46  starCount?: number;
47  className?: string;
48}
49 
50/* ── stars row ───────────────────────────────────────────────── */
51 
52function StarsRow({ count }: { count: number }) {
53  return (
54    <div className="flex gap-1">
55      {Array.from({ length: count }, (_, i) => (
56        <Star
57          key={i}
58          className="size-5 fill-background stroke-background drop-shadow"
59        />
60      ))}
61    </div>
62  );
63}
64 
65/* ── avatar ──────────────────────────────────────────────────── */
66 
67function AuthorAvatar({ author }: { author: CaseStudyAuthor }) {
68  const frame =
69    "aspect-square size-10 overflow-hidden rounded-lg border border-transparent shadow-md shadow-black/15 ring-1 ring-foreground/10";
70 
71  if (author.avatarUrl) {
72    return (
73      <div className={frame}>
74// … truncated