Testimonial

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