{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-card5",
  "title": "Review",
  "description": "Review built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/cards/review/5/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { StarIcon, ReplyIcon, Share2Icon, ThumbsUpIcon } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\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-5\">\n            <StarIcon className=\"size-5 fill-muted text-muted\" />\n            <span className=\"absolute inset-0 overflow-hidden\" style={{ width: `${fill * 100}%` }}>\n              <StarIcon className=\"size-5 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(20);\n  const [liked, setLiked] = React.useState(false);\n\n  function toggle() {\n    setLiked((v) => !v);\n    setLikes((n) => (liked ? n - 1 : n + 1));\n  }\n\n  return (\n    <Card className=\"w-full shadow-none md:w-[600px]\">\n      <CardContent className=\"space-y-4\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"flex items-center gap-3\">\n            <img\n              src=\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face\"\n              alt=\"Guy Hawkins\"\n              className=\"size-11 rounded-full object-cover\"\n            />\n            <div>\n              <p className=\"font-semibold\">Guy Hawkins</p>\n              <p className=\"text-sm text-muted-foreground\">22 Oct, 2020</p>\n            </div>\n          </div>\n          <Stars value={3.5} />\n        </div>\n\n        <p className=\"text-muted-foreground leading-relaxed\">\n          Customer reviews influence choices, providing insights on product\n          quality, service, and satisfaction. Honest feedback guides decisions,\n          shaping consumer experiences.\n        </p>\n\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\" className=\"gap-1.5 text-muted-foreground\">\n              <ReplyIcon className=\"size-4\" />\n              Reply\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" className=\"gap-1.5 text-muted-foreground\">\n              <Share2Icon className=\"size-4\" />\n              Share\n            </Button>\n          </div>\n          <button\n            onClick={toggle}\n            className={cn(\n              \"flex items-center gap-1.5 text-sm transition-colors\",\n              liked ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n            )}>\n            <span>{likes}</span>\n            <ThumbsUpIcon className={cn(\"size-4\", liked && \"fill-foreground\")} />\n          </button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/review-card5.tsx"
    }
  ],
  "type": "registry:block"
}