Testimonials 01

1import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
2 
3export interface Testimonials01Props {
4  quote: string
5  author: {
6    name: string
7    role: string
8    avatar: {
9      src?: string
10      alt?: string
11      fallback: string
12    }
13  }
14}
15 
16export function Testimonials01({
17  quote,
18  author,
19}: Readonly<Testimonials01Props>) {
20  return (
21    <div className="mx-auto flex max-w-3xl flex-col gap-7 rounded-3xl text-center">
22      <p className="text-xl leading-tight font-medium tracking-tight md:text-[2rem]">
23        "{quote}"
24      </p>
25 
26      <div className="flex items-center justify-center gap-4">
27        <Avatar size="default" className="md:data-[size=default]:size-10">
28          <AvatarImage
29            src={author.avatar.src}
30            alt={author.avatar.alt ?? author.name}
31          />
32          <AvatarFallback>{author.avatar.fallback}</AvatarFallback>
33        </Avatar>
34 
35        <div className="flex flex-col items-start text-left">
36          <p className="text-sm font-semibold md:text-base">{author.name}</p>
37          <p className="text-muted-foreground text-xs md:text-sm">
38            {author.role}
39          </p>
40        </div>
41      </div>
42    </div>
43  )
44}