{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel7",
  "title": "Carousel",
  "description": "Carousel built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/carousel/7/index.tsx",
      "content": "\"use client\";\n\nimport { StarIcon } from \"lucide-react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { cn } from \"@/lib/utils\";\n\nconst testimonials = [\n  {\n    quote:\n      \"The component library saved us weeks of design work. The defaults look right out of the box and everything fits together.\",\n    author: \"John Doe\",\n    initials: \"JD\",\n    avatar: \"https://i.pravatar.cc/150?img=11\",\n    role: \"CEO at Nordwind\",\n    rating: 5,\n  },\n  {\n    quote:\n      \"Clean code, thoughtful details and great documentation. Our design team adopted it in a single sprint.\",\n    author: \"Jane Smith\",\n    initials: \"JS\",\n    avatar: \"https://i.pravatar.cc/150?img=32\",\n    role: \"Product Designer at Loopline\",\n    rating: 5,\n  },\n  {\n    quote:\n      \"Best developer experience I have had with a UI kit. Accessibility comes built in, which sealed the deal for us.\",\n    author: \"Bob Johnson\",\n    initials: \"BJ\",\n    avatar: \"https://i.pravatar.cc/150?img=53\",\n    role: \"Frontend Developer at Fieldset\",\n    rating: 4,\n  },\n];\n\nexport default function CarouselComponent() {\n  return (\n    <Carousel className=\"w-full max-w-md\">\n      <CarouselContent>\n        {testimonials.map((testimonial, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-2\">\n              <Card className=\"bg-muted/50 shadow-none\">\n                <CardContent className=\"flex flex-col gap-4\">\n                  <div\n                    aria-label={`Rating: ${testimonial.rating} out of 5`}\n                    className=\"flex gap-0.5\"\n                    role=\"img\"\n                  >\n                    {Array.from({ length: 5 }).map((_, starIndex) => (\n                      <StarIcon\n                        aria-hidden=\"true\"\n                        className={cn(\n                          \"size-4\",\n                          starIndex < testimonial.rating\n                            ? \"fill-amber-400 text-amber-400\"\n                            : \"text-muted-foreground/40\",\n                        )}\n                        key={starIndex}\n                      />\n                    ))}\n                  </div>\n                  <blockquote className=\"text-base leading-relaxed\">\n                    &ldquo;{testimonial.quote}&rdquo;\n                  </blockquote>\n                  <div className=\"mt-2 flex items-center gap-3\">\n                    <Avatar size=\"lg\">\n                      <AvatarImage\n                        alt={testimonial.author}\n                        src={testimonial.avatar}\n                      />\n                      <AvatarFallback>{testimonial.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p className=\"text-sm font-semibold\">\n                        {testimonial.author}\n                      </p>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {testimonial.role}\n                      </p>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/carousel7.tsx"
    }
  ],
  "type": "registry:component"
}