Testimonials Marquee

1import { cn } from "@/lib/utils";
2 
3export function Testimonial({
4  className,
5  children,
6  ...props
7}: React.ComponentProps<"figure">) {
8  return (
9    <figure
10      data-slot="testimonial"
11      className={cn("flex h-full flex-col", className)}
12      {...props}
13    >
14      {children}
15    </figure>
16  );
17}
18 
19export function TestimonialQuote({
20  className,
21  children,
22  ...props
23}: React.ComponentProps<"blockquote">) {
24  return (
25    <blockquote
26      data-slot="quote"
27      className={cn(
28        "grow px-4 py-3 text-base text-balance text-foreground italic",
29        className
30      )}
31      {...props}
32    >
33      {children}
34    </blockquote>
35  );
36}
37 
38export function TestimonialAuthor({
39  className,
40  children,
41  ...props
42}: React.ComponentProps<"figcaption">) {
43  return (
44    <figcaption
45      data-slot="author"
46      className={cn(
47        "grid grid-cols-[auto_1fr] grid-rows-2 items-center gap-x-3.5 px-4 pt-1 pb-3",
48        className
49      )}
50      {...props}
51    >
52      {children}
53    </figcaption>
54  );
55}
56 
57export function TestimonialAvatar({
58  className,
59  children,
60  ...props
61}: React.ComponentProps<"div">) {
62  return (
63    <div
64      data-slot="avatar"
65      className={cn("relative row-span-2 size-8 shrink-0", className)}
66      {...props}
67    >
68      {children}
69    </div>
70  );
71}
72 
73export function TestimonialAvatarImg({
74  className,
75  src,
76  alt,
77  ...props
78}: React.ComponentProps<"img">) {
79  return (
80    <img
81      data-slot="avatar-img"
82      className={cn("size-8 rounded-full select-none", className)}
83      src={src}
84      alt={alt}
85      {...props}
86    />
87  );
88}
89 
90export function TestimonialAvatarRing({
91  className,
92  ...props
93}: React.ComponentProps<"div">) {
94  return (
95    <div
96      data-slot="avatar-ring"
97      className={cn(
98        "pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/10 ring-inset dark:ring-white/15",
99        className
100      )}
101      {...props}
102    />
103  );
104}
105 
106export function TestimonialAuthorName({
107  className,
108  children,
109  ...props
110}: React.ComponentProps<"div">) {
111  return (
112    <div
113      data-slot="author-name"
114      className={cn(
115        "text-sm leading-4 font-semibold text-foreground",
116        className
117      )}
118      {...props}
119    >
120      {children}
121    </div>
122  );
123}
124 
125export function TestimonialAuthorTagline({
126  className,
127  children,
128  ...props
129}: React.ComponentProps<"div">) {
130  return (
131    <div
132      data-slot="author-tagline"
133      className={cn(
134// … truncated