{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-02",
  "type": "registry:block",
  "title": "Review 02",
  "files": [
    {
      "path": "src/components/commercn/reviews/review-02.tsx",
      "content": "import { Star, ThumbsUp, MessageCircle } from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nconst review = {\n    author: \"Jessica Martinez\",\n    rating: 4,\n    date: \"1 month ago\",\n    title: \"Good value for money\",\n    text: \"Considering the price point, this is an excellent deal. The packaging was a bit damaged upon arrival, but the product itself was intact and works great.\",\n    helpful: 6,\n    image: \"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/simple_person_c.png\",\n};\n\nexport function ReviewTwo() {\n    return (\n        <Card className=\"w-full max-w-xl shadow-none\">\n            <CardHeader>\n                <div className=\"flex gap-3 items-center\">\n                    <Avatar className=\"size-12 rounded-full shrink-0\">\n                        <AvatarImage src={review.image} alt={review.author} />\n                        <AvatarFallback>JS</AvatarFallback>\n                    </Avatar>\n                    <div className=\"flex flex-col gap-1\">\n                        <CardTitle className=\"\">{review.author}</CardTitle>\n                        <div className=\"flex items-center gap-2\">\n                            <div className=\"flex gap-0.5\">\n                                {Array.from({ length: 5 }).map((_, i) => (\n                                    <Star\n                                        key={i}\n                                        className={`size-3 ${i < review.rating ? \"fill-foreground/50 text-foreground\" : \"fill-muted-foreground/30 text-muted-foreground/30\"}`}\n                                    />\n                                ))}\n                            </div>\n                            <span className=\"text-xs text-muted-foreground\">• {review.date}</span>\n                        </div>\n                    </div>\n                </div>\n            </CardHeader>\n            <CardContent className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-col gap-1\">\n                    <h4 className=\"text-lg font-medium\">{review.title}</h4>\n                    <p className=\"font-normal text-muted-foreground leading-relaxed\">\n                        {review.text}\n                    </p>\n                </div>\n\n                <Separator />\n\n                {/* Actions */}\n                <div className=\"flex gap-2\">\n                    <Button variant=\"ghost\" size=\"sm\">\n                        <ThumbsUp className=\"size-4\" />\n                        <span className=\"font-semibold\">Helpful ({review.helpful})</span>\n                    </Button>\n                    <Button variant=\"ghost\" size=\"sm\">\n                        <MessageCircle className=\"size-4\" />\n                        <span className=\"font-semibold\">Comment</span>\n                    </Button>\n                </div>\n            </CardContent>\n        </Card>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}