Testimonial 03

1"use client";
2 
3import { useState } from "react";
4import { ArrowLeft, ArrowRight, Star } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/components/ui/button";
7 
8interface Testimonial03Item {
9  name: string;
10  role: string;
11  image: string;
12  content: string;
13  rating: number;
14}
15 
16interface Testimonial03Props {
17  label?: string;
18  title?: string;
19  description?: string;
20  testimonials?: Testimonial03Item[];
21  cta?: {
22    primary?: { text: string; url: string };
23    secondary?: { text: string; url: string };
24  };
25  footnote?: string;
26  className?: string;
27}
28 
29const StarRating = ({
30  rating,
31  white,
32  className,
33}: {
34  rating: number;
35  white?: boolean;
36  className?: string;
37}) => (
38  <div className={cn("flex gap-0.5", className)}>
39    {Array.from({ length: 5 }).map((_, i) => (
40      <Star
41        key={i}
42        className={cn(
43          "size-3",
44          white
45            ? i < Math.round(rating)
46              ? "fill-white text-white"
47              : "fill-white/20 text-white/20"
48            : i < Math.round(rating)
49              ? "fill-yellow-400 text-yellow-400"
50              : "fill-muted-foreground/20 text-muted-foreground/20",
51        )}
52      />
53    ))}
54  </div>
55);
56 
57const defaultTestimonials: Testimonial03Item[] = [
58  {
59    name: "Emily Watson",
60    role: "Product Manager",
61    image: "https://www.shadcnship.com/images/avatars/avatar-1.webp",
62    content:
63      "Our team's velocity increased significantly. The components are production-ready and beautifully designed — we went from prototype to live in days, not weeks.",
64    rating: 5,
65  },
66  {
67    name: "Alex Chen",
68    role: "Frontend Developer",
69    image: "https://www.shadcnship.com/images/avatars/avatar-3.webp",
70    content:
71      "These components saved me weeks of development time. Copy, paste, customize — it's that simple. The TypeScript support and accessibility built-in are exactly what I need.",
72    rating: 5,
73  },
74  {
75    name: "Sarah Johnson",
76    role: "UI/UX Designer",
77    image: "https://www.shadcnship.com/images/avatars/avatar-2.webp",
78    content:
79      "The components are beautifully designed and fully customizable. Perfect for rapid prototyping and production alike. Dark mode works flawlessly out of the box.",
80    rating: 5,
81  },
82  {
83    name: "Michael Rodriguez",
84    role: "Full-Stack Engineer",
85    image: "https://www.shadcnship.com/images/avatars/avatar-4.webp",
86    content:
87// … truncated