Testimonial Card

1import * as React from "react";
2import { Card, CardContent, type CardProps } from "@/components/ui/atoms/card";
3import { StarRating } from "@/components/ui/blocks/card-templates/star-rating";
4import { cn } from "@/lib/utils";
5 
6export interface TestimonialCardProps extends CardProps {
7  quote: string;
8  author: string;
9  role?: string;
10  avatar?: string;
11  rating?: number;
12}
13const TestimonialCard = React.forwardRef<HTMLDivElement, TestimonialCardProps>(
14  ({ author, avatar, className, quote, rating, role, ...props }, ref) => (
15    <Card ref={ref} className={cn("group h-full", className)} {...props}>
16      <CardContent className="flex h-full flex-1 flex-col p-5">
17        <span className="font-secondary text-4xl leading-none text-primary">“</span>
18        <blockquote className="mt-1 text-sm leading-relaxed text-secondary-foreground">
19          {quote}
20        </blockquote>
21        {rating != null && <StarRating rating={rating} className="mt-3" />}
22        <div className="mt-auto flex items-center gap-3 border-t border-border pt-4">
23          {avatar && <img src={avatar} alt="" className="size-9 rounded-full object-cover" />}
24          <div className="min-w-0">
25            <div className="truncate text-sm font-semibold">{author}</div>
26            {role && <div className="truncate text-xs text-muted-foreground">{role}</div>}
27          </div>
28        </div>
29      </CardContent>
30    </Card>
31  ),
32);
33TestimonialCard.displayName = "TestimonialCard";
34export { TestimonialCard };