Testimonial Wall Demo

1import { TestimonialWall } from "@/registry/loomui/testimonial-wall"
2 
3const QUOTES = [
4  {
5    name: "Ada",
6    handle: "@ada",
7    body: "Shipped the landing page in an afternoon.",
8  },
9  {
10    name: "Ren",
11    handle: "@ren",
12    body: "Motion I can hand to a designer without a meeting.",
13  },
14  {
15    name: "Kofi",
16    handle: "@kofi",
17    body: "The off switch is the reason I kept it.",
18  },
19  {
20    name: "Mira",
21    handle: "@mira",
22    body: "Reads like code I would have written myself.",
23  },
24  {
25    name: "Otto",
26    handle: "@otto",
27    body: "One file. No package to babysit for a year.",
28  },
29  {
30    name: "Suki",
31    handle: "@suki",
32    body: "Reduced motion was already handled. Nice.",
33  },
34  {
35    name: "Iris",
36    handle: "@iris",
37    body: "Every timing I wanted to change was a prop.",
38  },
39  {
40    name: "Bo",
41    handle: "@bo",
42    body: "Dark mode looked right on the first try.",
43  },
44  {
45    name: "Nell",
46    handle: "@nell",
47    body: "Fast enough that I stopped checking the profiler.",
48  },
49]
50 
51export default function TestimonialWallDemo() {
52  return (
53    <TestimonialWall className="h-[22rem] w-full max-w-3xl" duration={36}>
54      {QUOTES.map((quote) => (
55        <figure key={quote.name} className="bg-card rounded-xl border p-4">
56          <blockquote className="text-sm">{quote.body}</blockquote>
57          <figcaption className="text-muted-foreground mt-3 text-xs">
58            {quote.name} <span className="opacity-70">{quote.handle}</span>
59          </figcaption>
60        </figure>
61      ))}
62    </TestimonialWall>
63  )
64}