marquee

1import { cn } from "@/lib/utils";
2import { Marquee } from "@/components/magicui/marquee";
3 
4const reviews = [
5  {
6    name: "Jack",
7    username: "@jack",
8    body: "I've never seen anything like this before. It's amazing. I love it.",
9    img: "https://avatar.vercel.sh/jack",
10  },
11  {
12    name: "Jill",
13    username: "@jill",
14    body: "I don't know what to say. I'm speechless. This is amazing.",
15    img: "https://avatar.vercel.sh/jill",
16  },
17  {
18    name: "John",
19    username: "@john",
20    body: "I'm at a loss for words. This is amazing. I love it.",
21    img: "https://avatar.vercel.sh/john",
22  },
23  {
24    name: "Jane",
25    username: "@jane",
26    body: "I'm at a loss for words. This is amazing. I love it.",
27    img: "https://avatar.vercel.sh/jane",
28  },
29  {
30    name: "Jenny",
31    username: "@jenny",
32    body: "I'm at a loss for words. This is amazing. I love it.",
33    img: "https://avatar.vercel.sh/jenny",
34  },
35  {
36    name: "James",
37    username: "@james",
38    body: "I'm at a loss for words. This is amazing. I love it.",
39    img: "https://avatar.vercel.sh/james",
40  },
41];
42 
43const firstRow = reviews.slice(0, reviews.length / 2);
44const secondRow = reviews.slice(reviews.length / 2);
45 
46const ReviewCard = ({
47  img,
48  name,
49  username,
50  body,
51}: {
52  img: string;
53  name: string;
54  username: string;
55  body: string;
56}) => {
57  return (
58    <figure
59      className={cn(
60        "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4",
61        // light styles
62        "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
63        // dark styles
64        "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
65      )}
66    >
67      <div className="flex flex-row items-center gap-2">
68        <img className="rounded-full" width="32" height="32" alt="" src={img} />
69        <div className="flex flex-col">
70          <figcaption className="text-sm font-medium dark:text-white">
71            {name}
72          </figcaption>
73          <p className="text-xs font-medium dark:text-white/40">{username}</p>
74        </div>
75      </div>
76      <blockquote className="mt-2 text-sm">{body}</blockquote>
77    </figure>
78  );
79};
80 
81export function MarqueeDemo() {
82  return (
83    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
84      <Marquee pauseOnHover className="[--duration:20s]">
85        {firstRow.map((review) => (
86          <ReviewCard key={review.username} {...review} />
87        ))}
88      </Marquee>
89      <Marquee reverse pauseOnHover className="[--duration:20s]">
90        {secondRow.map((review) => (
91          <ReviewCard key={review.username} {...review} />
92        ))}
93      </Marquee>
94      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
95      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
96    </div>
97  );
98}