4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1aac,import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Avatar, AvatarFallback, AvatarImage } from "@/registry/default/ui/avatar"; import { Card } from "@/registry/default/ui/card"; interface Testimonial { /** Used as the React key; falls back to the index. */ id?: string; quote: ReactNode; name: string; role?: ReactNode; /** Image URL. Without one, the initials of `name` are shown. */ avatar?: string; } interface TestimonialsProps extends Omit, "title"> { eyebrow?: ReactNode; title?: ReactNode; description?: ReactNode; testimonials?: Testimonial[]; /** "masonry" flows cards of different heights into columns; "grid" aligns them in rows. */ variant?: "grid" | "masonry"; } const DEFAULT_TESTIMONIALS: Testimonial[] = [ { id: "1", quote: "We moved our whole team over in an afternoon. Planning meetings are shorter because everyone already knows where things stand.", name: "Nadia Brooks", role: "Engineering manager", }, { id: "2", quote: "The setup took five minutes and it just works.", name: "Tomás Rivera", role: "Founder", }, { id: "3", quote: "I used to keep three spreadsheets to track releases. Now it is one shared view that updates itself, and I finally trust the numbers.", name: "Hannah Lindqvist", role: "Product lead", }, { id: "4", quote: "Support answered within the hour, every time we asked.", name: "Kofi Mensah", role: "Head of operations", }, { id: "5", quote: "Clear pricing, a clean interface and no surprises. It is the rare tool the whole company actually likes using.", name: "Mei Tanaka", role: "Product designer", }, { id: "6", quote: "Our onboarding checklist went from a document nobody read to something people finish.", name: "Ravi Iyer", role: "Customer success lead", }, ]; /** First letter of the first and last word, uppercased: "Ada Lovelace" → "AL". */ function getInitials(name: string) { const words = name.trim().split(/\s+/).filter(Boolean); const first = words[0]; if (first === undefined) return ""; const last = words.length > 1 ? words[words.length - 1] : undefined; const letter = (word: string | undefined) => (word ? (Array.from(word)[0] ?? "") : ""); return (letter(first) + letter(last)).toUpperCase(); } // Full class names so Tailwind picks them up. const LIST_VARIANTS = { masonry: "columns-1 gap-6 sm:columns-2 lg:columns-3", grid: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", } as const; /** * A wall of customer quotes under a centred header. Each quote is a * `

` with a `

` and a `
` holding an avatar, * the person's name and an optional role. Without an `avatar` image the * avatar shows the initials of `name`. The default "masonry" variant flows * quotes of different lengths into columns; "grid" lines them up in rows. * * Accessibility: the title is an `
` and the quotes are a list. The * avatar is hidden from screen readers because the name is right next to * it. * * @example * */ function Testimonials({ className, eyebrow = "Testimonials", title = "Loved by teams who ship", description = "Here is what people say after switching their work over.", testimonials = DEFAULT_TESTIMONIALS, variant = "masonry", ...props }: TestimonialsProps) { const hasHeader = eyebrow != null || title != null || description != null; return (

{hasHeader ? (
{eyebrow != null ? (
{eyebrow}
) : null} {title != null ? (
{title}
) : null} {description != null ? (
{description}
) : null}
) : null}
{testimonials.map((testimonial, index) => (

{testimonial.quote}

{testimonial.name} {testimonial.role != null ? ( {testimonial.role} ) : null}

))}

); } export { Testimonials, type Testimonial, type TestimonialsProps }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/avatar","@corsair-ui/card"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/components/blocks/testimonials.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]