39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
interface TestimonialCardProps {
|
|
quote: string;
|
|
author: string;
|
|
role: string;
|
|
image?: string;
|
|
}
|
|
|
|
export function TestimonialCard({ quote, author, role, image }: TestimonialCardProps) {
|
|
return (
|
|
<Card className="border-none shadow-sm">
|
|
<CardContent className="p-8 space-y-4">
|
|
<svg
|
|
className="h-8 w-8 text-gray-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 32 32"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
|
</svg>
|
|
<p className="text-gray-600 italic">{quote}</p>
|
|
<div className="flex items-center gap-4">
|
|
{image && (
|
|
<img
|
|
src={image}
|
|
alt={author}
|
|
className="h-10 w-10 rounded-full object-cover"
|
|
/>
|
|
)}
|
|
<div>
|
|
<p className="font-medium text-gray-900">{author}</p>
|
|
<p className="text-sm text-gray-500">{role}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |