{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-layout-demo",
  "title": "Pricing Demo",
  "description": "Demo showing toggle layout view component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/toggle-layout"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/toggle-layout/index.tsx",
      "content": "import {\n  SelectLayoutGroup,\n  ToggleLayout,\n  ToggleLayoutCell,\n  ToggleLayoutContainer,\n} from '@/components/systaliko-ui/ecommerce/toggle-layout';\nimport { Badge } from '@/components/systaliko-ui/shadcn/badge';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport Image from 'next/image';\n\nconst products = [\n  {\n    id: 'product-1',\n    name: 'Air Jordan',\n    category: 'Shoes',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/51idMcfqaeL._AC_SX695_.jpg',\n  },\n  {\n    id: 'product-2',\n    name: 'Air Jordan',\n    category: 'Shoes',\n    price: 29,\n    imageUrl: 'https://m.media-amazon.com/images/I/51T3fRu8BwL._AC_SY695_.jpg',\n  },\n  {\n    id: 'product-3',\n    name: 'Better than lebron',\n    category: 'Shirt',\n    price: 9.99,\n    imageUrl: 'https://m.media-amazon.com/images/I/51Dw3+xtbwL._AC_SY879_.jpg',\n  },\n  {\n    id: 'product-4',\n    name: 'Air Jordan',\n    category: 'Shoes',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/51sOQ6HcnZL._AC_SX695_.jpg',\n  },\n  {\n    id: 'product-5',\n    name: 'Air Jordan',\n    category: 'Shoes',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/61KH6jsAjFL._AC_SX695_.jpg',\n  },\n  {\n    id: 'product-6',\n    name: 'Better than lebron',\n    category: 'Shirt',\n    price: 9.99,\n    imageUrl: 'https://m.media-amazon.com/images/I/71+aB8Kqx4L._AC_SX679_.jpg',\n  },\n  {\n    id: 'product-7',\n    name: 'Air Jordan',\n    category: 'Shoes',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/51usDI-P8+L._AC_SX695_.jpg',\n  },\n  {\n    id: 'product-8',\n    name: 'Air Jordan',\n    category: 'Shorts',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/613m241hJvL._AC_SX679_.jpg',\n  },\n  {\n    id: 'product-9',\n    name: 'Air Jordan',\n    category: 'Shorts',\n    price: 19,\n    imageUrl: 'https://m.media-amazon.com/images/I/61Fchml2nkL._AC_SX695_.jpg',\n  },\n];\n\nexport function ToggleLayoutDemo() {\n  return (\n    <section className=\"w-full py-12 px-6\">\n      <ToggleLayout>\n        <SelectLayoutGroup className=\"mb-8\" />\n        <ToggleLayoutContainer>\n          {products.map((product) => (\n            <ToggleLayoutCell\n              key={product.id}\n              className=\"bg-card w-full min-h-96 flex flex-col  max-w-sm mx-auto py-6 px-4 space-y-8 border border-border/20 rounded-3xl shadow-2xs\"\n            >\n              <div className=\"w-fit mx-auto h-full flex  items-center\">\n                <Image\n                  src={product.imageUrl}\n                  width={695}\n                  height={390}\n                  className=\"inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain\"\n                  alt=\"nike air jordan\"\n                />\n              </div>\n\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between gap-4\">\n                  <h2 className=\"font-semibold text-sm tracking-tight \">\n                    {product.name}\n                  </h2>\n                  <Badge\n                    variant={'secondary'}\n                    className=\"shadow-xs border rounded-full\"\n                  >\n                    {product.category}\n                  </Badge>\n                </div>\n                <div className=\"flex items-center justify-between gap-4\">\n                  <p className=\"text-muted-foreground text-sm font-light tabular-nums tracking-tighter\">\n                    $120.00\n                  </p>\n                  <Button variant={'link'} size={'sm'}>\n                    Buy Now\n                  </Button>\n                </div>\n              </div>\n            </ToggleLayoutCell>\n          ))}\n        </ToggleLayoutContainer>\n      </ToggleLayout>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/toggle-layout.tsx"
    }
  ],
  "type": "registry:block"
}