{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card",
  "title": "Product Card",
  "description": "component for the Product Card",
  "dependencies": [
    "lucide-react",
    "next-themes"
  ],
  "registryDependencies": [
    "button",
    "select",
    "card"
  ],
  "files": [
    {
      "path": "app/registry/product-card/product-card.tsx",
      "content": "import Image from 'next/image';\nimport { Heart, Search, Star } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Card, CardContent } from '@/components/ui/card';\n\nexport default function Productcard() {\n  const products = [\n    {\n      id: 1,\n      name: 'HydraGlow Vitamin C Serum',\n      description:\n        'Brightens skin tone and reduces dark spots with potent vitamin C and hyaluronic acid.',\n      price: 32,\n      rating: 5,\n      reviews: 184,\n      image: '/product/product1.jpg',\n      featured: true,\n    },\n    {\n      id: 2,\n      name: 'AquaBoost Hydrating Gel',\n      description: 'Lightweight gel moisturizer for all-day hydration and a dewy finish.',\n      price: 28,\n      rating: 4,\n      reviews: 97,\n      image: '/product/product2.jpg',\n      featured: false,\n    },\n    {\n      id: 3,\n      name: 'PureShield SPF 50+ Sunscreen',\n      description: 'Broad-spectrum sun protection with a non-greasy, invisible finish.',\n      price: 22,\n      rating: 5,\n      reviews: 210,\n      image: '/product/product3.jpg',\n      featured: false,\n    },\n    {\n      id: 4,\n      name: 'Renewal Night Repair Cream',\n      description:\n        'Deeply nourishing night cream that repairs and revitalizes skin while you sleep.',\n      price: 36,\n      rating: 4,\n      reviews: 75,\n      image: '/product/product4.jpg',\n      featured: true,\n    },\n    {\n      id: 5,\n      name: 'Radiance Boosting Face Mist',\n      description:\n        'Refreshing face mist with rose water and aloe vera for instant hydration and glow.',\n      price: 18,\n      rating: 4,\n      reviews: 120,\n      image: '/product/product5.jpg',\n      featured: false,\n    },\n    {\n      id: 6,\n      name: 'Soothing Lemon Gel',\n      description: 'Natural aloe vera gel to soothe and hydrate irritated skin.',\n      price: 15,\n      rating: 5,\n      reviews: 85,\n      image: '/product/product6.jpg',\n      featured: false,\n    },\n  ];\n\n  return (\n    <div className=\"px-6\">\n      <div className=\"max-w-7xl mx-auto\">\n        <div className=\"mb-8\">\n          <p className=\"text-muted-foreground text-sm font-medium mb-2\">Skin Care Collection</p>\n          <h1 className=\"text-foreground text-3xl font-bold mb-8\">Our Skin Care Products</h1>\n\n          <div className=\"flex items-center gap-6 mb-8\">\n            <Button variant=\"default\" className=\"px-6 py-2 rounded-full text-sm font-medium\">\n              Featured\n            </Button>\n            <Button variant=\"ghost\" className=\"text-sm font-medium\">\n              Best Seller\n            </Button>\n            <Button variant=\"ghost\" className=\"text-sm font-medium\">\n              New Arrival\n            </Button>\n          </div>\n\n          <div className=\"flex items-center gap-4\">\n            <Select>\n              <SelectTrigger className=\"w-48 rounded-full\">\n                <SelectValue placeholder=\"Select Category\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"serums\">Serums</SelectItem>\n                <SelectItem value=\"moisturizers\">Moisturizers</SelectItem>\n                <SelectItem value=\"sunscreens\">Sunscreens</SelectItem>\n                <SelectItem value=\"night-creams\">Night Creams</SelectItem>\n              </SelectContent>\n            </Select>\n\n            <Select>\n              <SelectTrigger className=\"w-48 rounded-full\">\n                <SelectValue placeholder=\"Select Type\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"spray\">Sprays</SelectItem>\n                <SelectItem value=\"wipes\">Wipes</SelectItem>\n                <SelectItem value=\"solution\">Solutions</SelectItem>\n              </SelectContent>\n            </Select>\n\n            <Select>\n              <SelectTrigger className=\"w-48 rounded-full\">\n                <SelectValue placeholder=\"Sort By\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"all\">All Products</SelectItem>\n                <SelectItem value=\"featured\">Featured</SelectItem>\n                <SelectItem value=\"new\">New Arrivals</SelectItem>\n              </SelectContent>\n            </Select>\n\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto rounded-full\">\n              <Search className=\"w-5 h-5\" />\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {products.map((product) => (\n            <Card key={product.id} className=\"group\">\n              <div className=\"relative rounded-2xl p-8 mb-4 aspect-square flex items-center justify-center bg-muted\">\n                <Button variant=\"ghost\" size=\"icon\" className=\"absolute top-4 left-4 rounded-full\">\n                  <Heart className=\"w-5 h-5 text-muted-foreground\" />\n                </Button>\n                {product.featured && (\n                  <span className=\"absolute top-4 right-4 bg-background text-foreground px-3 py-1 rounded-full text-xs font-medium border\">\n                    Featured\n                  </span>\n                )}\n                <Image\n                  src={product.image || '/placeholder.svg'}\n                  alt={product.name}\n                  fill\n                  className=\"object-cover rounded-t-lg\"\n                />\n              </div>\n              <CardContent className=\"space-y-3\">\n                <h3 className=\"text-foreground font-medium text-lg leading-tight\">\n                  {product.name}\n                </h3>\n                <p className=\"text-muted-foreground text-sm\">{product.description}</p>\n                {/* Rating */}\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex items-center\">\n                    {[...Array(product.rating)].map((_, i) => (\n                      <Star key={i} className=\"w-4 h-4 fill-yellow-400 text-yellow-400\" />\n                    ))}\n                    {[...Array(5 - product.rating)].map((_, i) => (\n                      <Star key={i} className=\"w-4 h-4 text-muted-foreground\" />\n                    ))}\n                  </div>\n                  <span className=\"text-muted-foreground text-sm\">({product.reviews} reviews)</span>\n                </div>\n\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-foreground text-2xl font-bold\">${product.price}</span>\n                  <Button className=\"rounded-full px-6 py-2 text-sm font-medium\">\n                    Add to Cart\n                  </Button>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/product-card.tsx"
    }
  ],
  "type": "registry:component"
}