{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-product-list-comparison-list","type":"registry:block","title":"Comparison List","files":[{"path":"components/blocks/ecommerce/product-list/comparison-list.tsx","content":"import { Checkbox } from '@/components/ui/checkbox';\nimport { Check, X } from 'lucide-react';\nimport { useState } from 'react';\n\ninterface Feature {\n  name: string;\n  description: string;\n}\n\ninterface Product {\n  id: number;\n  name: string;\n  image: string;\n  price: number;\n  features: Record<string, boolean>;\n  specs: Record<string, string>;\n}\n\nexport default function ComparisonList() {\n  const [selectedProducts, setSelectedProducts] = useState<number[]>([1, 2]);\n\n  const features: Feature[] = [\n    {\n      name: 'Water Resistant',\n      description: 'Protected against water splashes',\n    },\n    {\n      name: 'Heart Rate Monitor',\n      description: 'Continuous heart rate tracking',\n    },\n    { name: 'GPS', description: 'Built-in GPS tracking' },\n    { name: 'Sleep Tracking', description: 'Advanced sleep monitoring' },\n    { name: 'Notifications', description: 'Smart notifications support' },\n  ];\n\n  const specs = [\n    'Battery Life',\n    'Display Size',\n    'Case Material',\n    'Band Material',\n    'Weight',\n  ];\n\n  const products: Product[] = [\n    {\n      id: 1,\n      name: 'Classic Leather Watch',\n      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',\n      price: 299,\n      features: {\n        'Water Resistant': true,\n        'Heart Rate Monitor': false,\n        GPS: false,\n        'Sleep Tracking': false,\n        Notifications: true,\n      },\n      specs: {\n        'Battery Life': '2 years',\n        'Display Size': '42mm',\n        'Case Material': 'Stainless Steel',\n        'Band Material': 'Genuine Leather',\n        Weight: '48g',\n      },\n    },\n    {\n      id: 2,\n      name: 'Smart Watch Pro',\n      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',\n      price: 499,\n      features: {\n        'Water Resistant': true,\n        'Heart Rate Monitor': true,\n        GPS: true,\n        'Sleep Tracking': true,\n        Notifications: true,\n      },\n      specs: {\n        'Battery Life': '5 days',\n        'Display Size': '44mm',\n        'Case Material': 'Aluminum',\n        'Band Material': 'Silicone',\n        Weight: '52g',\n      },\n    },\n    {\n      id: 3,\n      name: 'Sport Watch Elite',\n      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',\n      price: 399,\n      features: {\n        'Water Resistant': true,\n        'Heart Rate Monitor': true,\n        GPS: true,\n        'Sleep Tracking': false,\n        Notifications: true,\n      },\n      specs: {\n        'Battery Life': '7 days',\n        'Display Size': '45mm',\n        'Case Material': 'Titanium',\n        'Band Material': 'Sport Band',\n        Weight: '45g',\n      },\n    },\n  ];\n\n  const handleProductSelect = (id: number) => {\n    if (selectedProducts.includes(id)) {\n      setSelectedProducts(selectedProducts.filter((p) => p !== id));\n    } else if (selectedProducts.length < 3) {\n      setSelectedProducts([...selectedProducts, id]);\n    }\n  };\n\n  const selectedProductsData = products.filter((p) =>\n    selectedProducts.includes(p.id)\n  );\n\n  return (\n    <div className=\"mx-auto w-full max-w-7xl p-6\">\n      {/* Product Selection */}\n      <div className=\"mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        {products.map((product) => (\n          <div\n            key={product.id}\n            className={`bg-card relative rounded-xl border p-4 ${\n              selectedProducts.includes(product.id)\n                ? 'ring-primary ring-2'\n                : 'hover:border-primary/50'\n            }`}\n          >\n            <div className=\"flex items-start gap-4\">\n              <div className=\"bg-muted relative h-20 w-20 shrink-0 overflow-hidden rounded-lg\">\n                <img\n                  src={product.image}\n                  alt={product.name}\n                  className=\"object-cover\"\n                  sizes=\"80px\"\n                />\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <h3 className=\"truncate font-medium\">{product.name}</h3>\n                <div className=\"mt-1 text-lg font-medium\">${product.price}</div>\n              </div>\n              <Checkbox\n                checked={selectedProducts.includes(product.id)}\n                onCheckedChange={() => handleProductSelect(product.id)}\n                disabled={\n                  !selectedProducts.includes(product.id) &&\n                  selectedProducts.length >= 3\n                }\n              />\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Comparison Table */}\n      {selectedProductsData.length > 0 && (\n        <div className=\"bg-card overflow-hidden rounded-xl border\">\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full\">\n              <thead>\n                <tr className=\"bg-muted/50 border-b\">\n                  <th className=\"p-4 text-left font-medium\">Features</th>\n                  {selectedProductsData.map((product) => (\n                    <th\n                      key={product.id}\n                      className=\"p-4 text-center font-medium\"\n                    >\n                      {product.name}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                <tr className=\"border-b\">\n                  <td className=\"p-4 font-medium\">Price</td>\n                  {selectedProductsData.map((product) => (\n                    <td key={product.id} className=\"p-4 text-center\">\n                      ${product.price}\n                    </td>\n                  ))}\n                </tr>\n                {features.map((feature) => (\n                  <tr key={feature.name} className=\"border-b\">\n                    <td className=\"p-4\">\n                      <div className=\"font-medium\">{feature.name}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {feature.description}\n                      </div>\n                    </td>\n                    {selectedProductsData.map((product) => (\n                      <td key={product.id} className=\"p-4\">\n                        <div className=\"flex justify-center\">\n                          {product.features[feature.name] ? (\n                            <Check className=\"text-primary h-5 w-5\" />\n                          ) : (\n                            <X className=\"text-muted-foreground h-5 w-5\" />\n                          )}\n                        </div>\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n                {specs.map((spec) => (\n                  <tr key={spec} className=\"border-b\">\n                    <td className=\"p-4 font-medium\">{spec}</td>\n                    {selectedProductsData.map((product) => (\n                      <td key={product.id} className=\"p-4 text-center\">\n                        {product.specs[spec]}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/product-list/comparison-list.tsx"},{"path":"components/ui/checkbox.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <CheckIcon\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n","type":"registry:ui","target":"components/ui/checkbox.tsx"}],"description":"A side by side list lining up products with specs, prices, and features in columns. Helps shoppers weigh options before they commit to a purchase.","dependencies":["lucide-react","radix-ui"]}