{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "customer-reviews",
  "type": "registry:component",
  "title": "Customer Reviews",
  "author": "Toby Belhome",
  "description": "Showcase authentic customer feedback with Tailwind CSS customer review sections. These layouts feature ratings, user comments, and profile visuals to build trust and influence purchase decisions. Perfect for online stores and marketplaces seeking modern, credible, and engaging review displays.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "avatar",
    "button-group"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/customer-reviews/01/data.ts",
      "content": "export const reviews = [\n  {\n    id: 1,\n    customerName: \"Sarah Johnson\",\n    customerAvatar:\n      \"https://plus.unsplash.com/premium_photo-1671656349218-5218444643d8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=200\",\n    rating: 5,\n    reviewDate: \"2 week ago\",\n    totalSpend: 450,\n    totalReviews: 8,\n    reviewText:\n      \"Absolutely love this product! The quality exceeded my expectations and the customer service was outstanding. I've been a loyal customer for over a year now and have never been disappointed. Highly recommend to anyone looking for premium quality.\"\n  },\n  {\n    id: 2,\n    customerName: \"Michael Chen\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1701615004837-40d8573b6652?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\",\n    rating: 4,\n    reviewDate: \"Yesterday\",\n    totalSpend: 680,\n    totalReviews: 12,\n    reviewText:\n      \"Great experience overall! The product arrived quickly and was exactly as described. The attention to detail is impressive. Only giving 4 stars because I wish there were more color options available, but that's a minor issue.\"\n  },\n  {\n    id: 3,\n    customerName: \"Emma Davis\",\n    customerAvatar:\n      \"https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjV8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\",\n    rating: 5,\n    reviewDate: \"1 week ago\",\n    totalSpend: 320,\n    totalReviews: 6,\n    reviewText:\n      \"This is my third purchase and I keep coming back because the quality is consistently excellent. The packaging is beautiful and the product itself is even better in person. Will definitely be ordering again!\"\n  },\n  {\n    id: 4,\n    customerName: \"James Wilson\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1623582854588-d60de57fa33f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\",\n    rating: 5,\n    reviewDate: \"4 days ago\",\n    totalSpend: 890,\n    totalReviews: 15,\n    reviewText:\n      \"Outstanding quality and craftsmanship! I've recommended this to all my friends and family. The value for money is incredible and the customer support team went above and beyond to ensure I was satisfied with my purchase.\"\n  }\n];\n",
      "type": "registry:component",
      "target": "components/customer-reviews/data.ts"
    },
    {
      "path": "examples/blocks/ecommerce/customer-reviews/01/page.tsx",
      "content": "import { ReviewCard } from \"./review-card\";\nimport { reviews } from \"./data\";\n\nexport default function CustomerReviews() {\n  const averageRating = (\n    reviews.reduce((acc, review) => acc + review.rating, 0) / reviews.length\n  ).toFixed(1);\n\n  const totalReviews = reviews.length;\n\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-3xl px-4\">\n        <header className=\"mb-6 flex flex-col justify-between border-b pb-4 lg:mb-10 lg:flex-row lg:pb-6\">\n          <h1 className=\"text-foreground font-heading text-xl md:text-2xl\">Customer Reviews</h1>\n          <div className=\"text-muted-foreground flex items-center gap-2 lg:items-end lg:justify-center\">\n            <div className=\"flex items-center gap-2 lg:items-end\">\n              <span className=\"text-lg font-bold text-amber-500 md:text-2xl\">{averageRating}</span>\n              <span className=\"text-sm\">out of 5</span>\n            </div>\n            <span>•</span>\n            <span className=\"text-sm\">based on {totalReviews} reviews</span>\n          </div>\n        </header>\n\n        <div className=\"grid gap-6 divide-y lg:grid-cols-1 lg:gap-10 [&>div]:pb-6 lg:[&>div]:pb-10\">\n          {reviews.map((review, i) => (\n            <ReviewCard key={i} review={review} />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/customer-reviews/customer-reviews.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/customer-reviews/01/review-card.tsx",
      "content": "import { Star, ThumbsUp, ThumbsDown } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@/components/ui/button-group\";\n\ninterface ReviewCardProps {\n  customerName: string;\n  customerAvatar?: string;\n  rating: number;\n  reviewDate: string;\n  totalSpend: number;\n  totalReviews: number;\n  reviewText: string;\n}\n\nexport const ReviewCard = ({ review }: { review: ReviewCardProps }) => {\n  const renderStars = () => {\n    return Array(5)\n      .fill(\"\")\n      .map((_, i) =>\n        i < review.rating ? (\n          <Star key={i} className=\"size-4 fill-amber-500 text-amber-500 lg:size-5\" />\n        ) : (\n          <Star key={i} className=\"text-muted-foreground size-4 lg:size-5\" />\n        )\n      );\n  };\n\n  return (\n    <div className=\"flex gap-4\">\n      <Avatar className=\"size-12 rounded-none lg:size-20\">\n        <AvatarImage\n          src={review.customerAvatar}\n          alt={review.customerName}\n          className=\"object-cover\"\n        />\n      </Avatar>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        {/* Header */}\n        <div className=\"mb-3 flex items-start justify-between gap-4\">\n          <div>\n            <h3 className=\"mb-1 font-semibold\">{review.customerName}</h3>\n            <div className=\"text-muted-foreground flex gap-1 text-sm\">\n              Total Spend: <span className=\"font-semibold\">${review.totalSpend}</span>\n            </div>\n          </div>\n          <div className=\"flex flex-col items-end gap-2\">\n            <div className=\"flex items-center gap-1\">{renderStars()}</div>\n            <span className=\"text-muted-foreground text-sm whitespace-nowrap\">\n              {review.reviewDate}\n            </span>\n          </div>\n        </div>\n\n        {/* Review Text */}\n        <p className=\"text-muted-foreground mb-4 leading-relaxed\">{review.reviewText}</p>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3\">\n          <ButtonGroup>\n            <Button variant=\"secondary\" size=\"sm\">\n              <ThumbsUp />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"outline\" size=\"icon-sm\" disabled>\n              15\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"secondary\" size=\"sm\">\n              <ThumbsDown />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"outline\" size=\"icon-sm\" disabled>\n              2\n            </Button>\n          </ButtonGroup>\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/customer-reviews/review-card.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}