{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-card7",
  "title": "Review",
  "description": "Review built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/cards/review/7/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  StarIcon,\n  ThumbsUpIcon,\n  ThumbsDownIcon,\n  MoreHorizontalIcon,\n  CheckCircleIcon,\n} from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst reviewImages = [\n  \"https://images.unsplash.com/photo-1545454675-3531b543be5d?w=200&h=200&fit=crop\",\n  \"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&h=200&fit=crop\",\n  \"https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=200&h=200&fit=crop\",\n];\n\nexport default function ReviewCard() {\n  const [helpful, setHelpful] = React.useState(1);\n  const [unhelpful, setUnhelpful] = React.useState(3);\n  const [vote, setVote] = React.useState<\"helpful\" | \"unhelpful\" | null>(null);\n\n  function handleVote(type: \"helpful\" | \"unhelpful\") {\n    if (vote === type) {\n      setVote(null);\n      type === \"helpful\" ? setHelpful((n) => n - 1) : setUnhelpful((n) => n - 1);\n    } else {\n      if (vote === \"helpful\") setHelpful((n) => n - 1);\n      if (vote === \"unhelpful\") setUnhelpful((n) => n - 1);\n      setVote(type);\n      type === \"helpful\" ? setHelpful((n) => n + 1) : setUnhelpful((n) => n + 1);\n    }\n  }\n\n  return (\n    <Card className=\"w-full shadow-none md:w-[360px]\">\n      <CardContent className=\"space-y-3\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2.5\">\n            <img\n              src=\"https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=80&h=80&fit=crop&crop=face\"\n              alt=\"Somalie\"\n              className=\"size-9 rounded-full object-cover\"\n            />\n            <span className=\"text-sm font-medium\">By Somalie</span>\n          </div>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-7 text-muted-foreground\">\n            <MoreHorizontalIcon className=\"size-4\" />\n          </Button>\n        </div>\n\n        {/* Stars */}\n        <div className=\"flex items-center gap-0.5\">\n          {Array.from({ length: 5 }).map((_, i) => (\n            <StarIcon\n              key={i}\n              className={cn(\n                \"size-4\",\n                i < 1 ? \"fill-amber-400 text-amber-400\" : \"fill-muted text-muted\"\n              )}\n            />\n          ))}\n        </div>\n\n        {/* Title + body */}\n        <div className=\"space-y-1.5\">\n          <p className=\"font-semibold\">Best Audio Upgrade</p>\n          <p className=\"text-sm leading-relaxed text-muted-foreground\">\n            The soundbar with subwoofer has significantly upgraded my home\n            theater system. The sound quality is incredible, and the setup was\n            very straightforward. I love the wireless connectivity and the rich\n            bass. Totally worth it.\n          </p>\n        </div>\n\n        {/* Meta */}\n        <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n          <span>1 year ago</span>\n          <span>•</span>\n          <CheckCircleIcon className=\"size-3.5 text-emerald-500\" />\n          <span>Verified Purchase</span>\n        </div>\n\n        {/* Images */}\n        <div className=\"flex gap-2\">\n          {reviewImages.map((src, i) => (\n            <img\n              key={i}\n              src={src}\n              alt={`Review photo ${i + 1}`}\n              className=\"size-16 rounded-lg object-cover\"\n            />\n          ))}\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex items-center justify-between pt-1\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              onClick={() => handleVote(\"helpful\")}\n              className={cn(\n                \"flex items-center gap-1.5 text-sm transition-colors\",\n                vote === \"helpful\"\n                  ? \"text-foreground\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}>\n              <ThumbsUpIcon\n                className={cn(\"size-4\", vote === \"helpful\" && \"fill-foreground\")}\n              />\n              Helpful ({helpful})\n            </button>\n            <button\n              onClick={() => handleVote(\"unhelpful\")}\n              className={cn(\n                \"flex items-center gap-1.5 text-sm transition-colors\",\n                vote === \"unhelpful\"\n                  ? \"text-foreground\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}>\n              <ThumbsDownIcon\n                className={cn(\"size-4\", vote === \"unhelpful\" && \"fill-foreground\")}\n              />\n              Unhelpful ({unhelpful})\n            </button>\n          </div>\n          <button className=\"text-sm font-medium text-primary hover:underline\">\n            Report\n          </button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/review-card7.tsx"
    }
  ],
  "type": "registry:block"
}