{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-card6",
  "title": "Review",
  "description": "Review built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/cards/review/6/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { StarIcon, MessageSquareIcon, SendIcon, HeartIcon } 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\n              className=\"absolute inset-0 overflow-hidden\"\n              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 [liked, setLiked] = React.useState(false);\n\n  return (\n    <Card className=\"w-full shadow-none md:w-[700px]\">\n      <CardContent>\n        <div className=\"flex gap-5\">\n          {/* Left: avatar + user info */}\n          <div className=\"flex shrink-0 flex-col items-center gap-2\">\n            <img\n              src=\"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&fit=crop&crop=face\"\n              alt=\"Towhidur Rahman\"\n              className=\"size-16 rounded-xl object-cover\"\n            />\n            <div className=\"text-center\">\n              <p className=\"text-sm font-bold leading-tight\">\n                Towhidur\n                <br />\n                Rahman\n              </p>\n              <p className=\"mt-1 text-xs text-muted-foreground\">\n                Total Spend: <span className=\"font-bold text-foreground\">$200</span>\n              </p>\n              <p className=\"text-xs text-muted-foreground\">\n                Total Review: <span className=\"font-bold text-foreground\">14</span>\n              </p>\n            </div>\n          </div>\n\n          {/* Right: rating + text + actions */}\n          <div className=\"flex flex-1 flex-col gap-3\">\n            <div className=\"flex items-center gap-2.5\">\n              <Stars value={3} />\n              <span className=\"text-sm text-muted-foreground\">24-10-2022</span>\n            </div>\n\n            <p className=\"text-sm leading-relaxed text-muted-foreground\">\n              My first and only order on Etsy, and I'm beyond delighted! I\n              requested a custom piece based on two stones I was called to invite\n              together in this kind of creation. The fun and genuine joy I invite\n              together in this kind of creation. The fun and genuine joy.\n            </p>\n\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"rounded-full gap-1.5\">\n                  <MessageSquareIcon className=\"size-3.5\" />\n                  Public Comment\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"rounded-full gap-1.5\">\n                  <SendIcon className=\"size-3.5\" />\n                  Direct Message\n                </Button>\n              </div>\n              <button\n                onClick={() => setLiked((v) => !v)}\n                className=\"text-muted-foreground transition-colors hover:text-foreground\">\n                <HeartIcon\n                  className={cn(\n                    \"size-5\",\n                    liked && \"fill-red-500 text-red-500\"\n                  )}\n                />\n              </button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/review-card6.tsx"
    }
  ],
  "type": "registry:block"
}