Testimonial Card

1'use client';
2 
3import * as React from 'react';
4import { Quote, Star } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import Image from 'next/image';
7 
8export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
9  name: string;
10  role: string;
11  content: string;
12  avatarSrc: string;
13  rating?: number;
14}
15 
16export const TestimonialCard = React.forwardRef<
17  HTMLDivElement,
18  TestimonialCardProps
19>(
20  (
21    { name, role, content, avatarSrc, rating = 5, className, ...props },
22    ref
23  ) => {
24    return (
25      <div
26        ref={ref}
27        className={cn('flex w-full max-w-sm flex-col items-center', className)}
28        {...props}
29      >
30        {/* Main Bubble */}
31        <div className='relative w-full rounded-2xl bg-white p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:bg-slate-900 dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)]'>
32          <div className='flex flex-col items-center text-center'>
33            <h3 className='text-lg font-semibold text-slate-900 dark:text-slate-100'>
34              {name}
35            </h3>
36            <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>
37              {role}
38            </p>
39 
40            <div className='mt-6 flex justify-center text-blue-600 dark:text-blue-500'>
41              <Quote className='h-8 w-8 fill-current' />
42            </div>
43 
44            <p className='mt-6 text-sm leading-relaxed text-slate-600 dark:text-slate-300'>
45              {content}
46            </p>
47 
48            <div className='mt-6 flex items-center justify-center gap-1'>
49              {Array.from({ length: 5 }).map((_, i) => (
50                <Star
51                  key={i}
52                  className={cn(
53                    'h-4 w-4',
54                    i < rating
55                      ? 'fill-yellow-400 text-yellow-400'
56                      : 'fill-slate-200 text-slate-200 dark:fill-slate-700 dark:text-slate-700'
57                  )}
58                />
59              ))}
60            </div>
61          </div>
62 
63          {/* Bubble Tail */}
64          <div className='absolute -bottom-3 left-1/2 -translate-x-1/2 transform drop-shadow-md'>
65            <div className='h-0 w-0 border-x-8 border-t-[12px] border-x-transparent border-t-white dark:border-t-slate-900' />
66          </div>
67        </div>
68 
69        {/* Avatar */}
70        <div className='mt-6 h-16 w-16 overflow-hidden rounded-full border-4 border-white shadow-sm dark:border-slate-800'>
71          <Image
72            src={avatarSrc}
73            alt={name}
74// … truncated