Testimonial 02

1import { cn } from "@/lib/utils";
2import { Card, CardContent } from "@/components/ui/card";
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Button } from "@/components/ui/button";
5import { Star } from "lucide-react";
6import { QuoteIcon } from "@/components/social-icons";
7 
8interface Testimonial {
9  type: "text" | "image" | "cta";
10  img?: string;
11  title?: string;
12  content?: string;
13  author?: {
14    name: string;
15    avatar?: string;
16  };
17  rating?: number;
18  button?: { text: string; url: string };
19}
20 
21interface Testimonial02Props {
22  label?: string;
23  title?: string;
24  description?: string;
25  testimonials?: Testimonial[];
26  className?: string;
27}
28 
29const StarRating = ({ rating = 5 }: { rating?: number }) => (
30  <div className="flex gap-0.5">
31    {Array.from({ length: rating }).map((_, i) => (
32      <Star key={i} className="size-3.5 fill-yellow-400 text-yellow-400" />
33    ))}
34  </div>
35);
36 
37const TestimonialCard = ({ testimonial }: { testimonial: Testimonial }) => {
38  if (testimonial.type === "cta") {
39    return (
40      <Card className="aspect-3/4 h-full bg-primary text-primary-foreground shadow-none">
41        <CardContent className="flex h-full flex-col gap-4 p-6">
42          <h3 className="text-xl font-medium">{testimonial.title}</h3>
43          <p className="flex-1 text-sm opacity-90">{testimonial.content}</p>
44          <Button variant="secondary" className="w-full" asChild>
45            <a href={testimonial.button?.url || "#"}>
46              {testimonial.button?.text}
47            </a>
48          </Button>
49        </CardContent>
50      </Card>
51    );
52  }
53 
54  if (testimonial.type === "image") {
55    return (
56      <Card className="h-full py-0 shadow-none">
57        <div className="aspect-3/4 h-full w-full overflow-hidden rounded-xl bg-muted">
58          {testimonial.img && (
59            <img
60              src={testimonial.img}
61              alt=""
62              className="size-full object-cover"
63            />
64          )}
65        </div>
66      </Card>
67    );
68  }
69 
70  return (
71    <Card className="h-full p-4 shadow-none">
72      <CardContent className="flex h-full flex-col justify-between gap-12 p-0">
73        <div className="flex flex-col gap-2">
74          <QuoteIcon className="size-4 dark:invert" />
75          {testimonial.title && (
76            <h4 className="text-2xl leading-tight">{testimonial.title}</h4>
77          )}
78        </div>
79        <div className="flex flex-col gap-4">
80          {testimonial.content && (
81// … truncated