{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-card11",
  "title": "Review",
  "description": "Review built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/cards/review/11/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { StarIcon, ThumbsUpIcon, ThumbsDownIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Stars({ value }: { value: number }) {\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      {Array.from({ length: 5 }).map((_, i) => {\n        const fill = Math.min(Math.max(value - i, 0), 1);\n        return (\n          <span key={i} className=\"relative inline-block size-4\">\n            <StarIcon className=\"size-4 fill-muted text-muted\" />\n            <span\n              className=\"absolute inset-0 overflow-hidden\"\n              style={{ width: `${fill * 100}%` }}>\n              <StarIcon className=\"size-4 fill-amber-400 text-amber-400\" />\n            </span>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function ReviewCard() {\n  const [likes, setLikes] = React.useState(35);\n  const [dislikes, setDislikes] = React.useState(2);\n  const [vote, setVote] = React.useState<\"like\" | \"dislike\" | null>(null);\n\n  function handleVote(type: \"like\" | \"dislike\") {\n    if (vote === type) {\n      setVote(null);\n      type === \"like\" ? setLikes((n) => n - 1) : setDislikes((n) => n - 1);\n    } else {\n      if (vote === \"like\") setLikes((n) => n - 1);\n      if (vote === \"dislike\") setDislikes((n) => n - 1);\n      setVote(type);\n      type === \"like\" ? setLikes((n) => n + 1) : setDislikes((n) => n + 1);\n    }\n  }\n\n  return (\n    <div className=\"w-full space-y-6 md:w-[520px]\">\n      {/* Main review */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2.5\">\n          <img\n            src=\"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&fit=crop&crop=face\"\n            alt=\"Ann D.\"\n            className=\"size-10 rounded-full object-cover\"\n          />\n          <div>\n            <span className=\"text-sm font-semibold\">Ann D.</span>\n            <span className=\"ml-2 text-xs text-muted-foreground\">2 days ago</span>\n          </div>\n        </div>\n\n        <Stars value={3.5} />\n\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-semibold\">Great everyday sneakers</p>\n          <p className=\"text-sm leading-relaxed text-muted-foreground\">\n            These shoes are incredibly comfortable right out of the box. I wore\n            them on a full day of errands and my feet felt great the whole time.\n            The material feels durable and the sole provides solid grip on both\n            wet and dry surfaces. Really happy with this purchase.\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-4\">\n          <Button\n            variant=\"link\"\n            size=\"sm\"\n            className=\"h-auto p-0 text-xs text-muted-foreground hover:text-foreground\">\n            Reply\n          </Button>\n          <button\n            onClick={() => handleVote(\"like\")}\n            className={cn(\n              \"flex items-center gap-1 text-xs transition-colors\",\n              vote === \"like\"\n                ? \"text-foreground\"\n                : \"text-muted-foreground hover:text-foreground\"\n            )}>\n            <ThumbsUpIcon\n              className={cn(\"size-3.5\", vote === \"like\" && \"fill-foreground\")}\n            />\n            {likes}\n          </button>\n          <button\n            onClick={() => handleVote(\"dislike\")}\n            className={cn(\n              \"flex items-center gap-1 text-xs transition-colors\",\n              vote === \"dislike\"\n                ? \"text-foreground\"\n                : \"text-muted-foreground hover:text-foreground\"\n            )}>\n            <ThumbsDownIcon\n              className={cn(\"size-3.5\", vote === \"dislike\" && \"fill-foreground\")}\n            />\n            {dislikes}\n          </button>\n        </div>\n      </div>\n\n      {/* Reply */}\n      <div className=\"ml-10 space-y-2 border-l-2 pl-5\">\n        <div className=\"flex items-center gap-2.5\">\n          <img\n            src=\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\"\n            alt=\"Andrew G.\"\n            className=\"size-9 rounded-full object-cover\"\n          />\n          <div>\n            <span className=\"text-sm font-semibold\">Andrew G.</span>\n            <span className=\"ml-2 text-xs text-muted-foreground\">2 days ago</span>\n          </div>\n        </div>\n        <p className=\"text-sm leading-relaxed text-muted-foreground\">\n          Are these suitable for running or more casual use? I'm looking for\n          something I can use on light jogs but also wear daily without looking\n          too sporty.\n        </p>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/review-card11.tsx"
    }
  ],
  "type": "registry:block"
}