42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { cn } from "../lib/utils";
|
|
import { Card } from "./ui/card";
|
|
|
|
interface TestimonialCardProps {
|
|
quote: string;
|
|
author: string;
|
|
role: string;
|
|
avatarGradient: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function TestimonialCard({
|
|
quote,
|
|
author,
|
|
role,
|
|
avatarGradient,
|
|
className,
|
|
}: TestimonialCardProps) {
|
|
return (
|
|
<Card className={cn("glass-card border-none p-6 space-y-4", className)}>
|
|
<div className="flex gap-1 text-yellow-500">
|
|
{[1, 2, 3, 4, 5].map((_, i) => (
|
|
<svg key={i} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" className="w-4 h-4">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<p className="text-muted-foreground italic">
|
|
"{quote}"
|
|
</p>
|
|
<div className="flex items-center gap-3 pt-2">
|
|
<div className={cn("w-10 h-10 rounded-full animate-gradient", avatarGradient)} />
|
|
<div>
|
|
<p className="font-bold text-sm text-primary">{author}</p>
|
|
<p className="text-xs text-muted-foreground">{role}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|