{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce11",
  "title": "Size Guide Table",
  "description": "Measurement chart table with chest, waist, hips, and length columns. Perfect for clothing product pages and sizing reference.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/ecommerce11/ecommerce11.tsx",
      "content": "\"use client\";\n\nimport { Ruler } from \"lucide-react\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SizeRow {\n  size: string;\n  chest?: string;\n  waist?: string;\n  hips?: string;\n  length?: string;\n}\n\ninterface Ecommerce11Props {\n  heading?: string;\n  description?: string;\n  unit?: \"in\" | \"cm\";\n  sizes?: SizeRow[];\n  className?: string;\n}\n\nexport const ecommerce11Demo: Ecommerce11Props = {\n  heading: \"Size Guide\",\n  description:\n    \"Measurements are in inches. For the best fit, measure yourself and compare with the chart below.\",\n  unit: \"in\",\n  sizes: [\n    { size: \"XS\", chest: \"32-34\", waist: \"26-28\", hips: \"34-36\", length: \"26\" },\n    { size: \"S\", chest: \"34-36\", waist: \"28-30\", hips: \"36-38\", length: \"27\" },\n    { size: \"M\", chest: \"38-40\", waist: \"32-34\", hips: \"40-42\", length: \"28\" },\n    { size: \"L\", chest: \"42-44\", waist: \"36-38\", hips: \"44-46\", length: \"29\" },\n    { size: \"XL\", chest: \"46-48\", waist: \"40-42\", hips: \"48-50\", length: \"30\" },\n  ],\n};\n\nexport function Ecommerce11({\n  heading,\n  description,\n  unit = \"in\",\n  sizes = [],\n  className,\n}: Ecommerce11Props) {\n  const columns = sizes[0]\n    ? Object.keys(sizes[0]).filter((key) => key !== \"size\")\n    : [];\n\n  return (\n    <section className={cn(\"py-12 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-3xl px-4 md:px-6\">\n        <div className=\"mb-8 text-center\">\n          <div className=\"mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-muted\">\n            <Ruler className=\"size-6\" />\n          </div>\n          {heading && <h2 className=\"text-2xl font-semibold\">{heading}</h2>}\n          {description && (\n            <p className=\"mt-2 text-balance text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"overflow-x-auto rounded-lg border\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"bg-muted/50 hover:bg-muted/50\">\n                <TableHead className=\"h-14 text-center\">Size</TableHead>\n                {columns.map((col) => (\n                  <TableHead key={col} className=\"h-14 text-center capitalize\">\n                    {col} ({unit})\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {sizes.map((row, index) => (\n                <TableRow\n                  key={row.size}\n                  className={cn(\n                    index % 2 === 0 ? \"bg-background\" : \"bg-muted/30\"\n                  )}\n                >\n                  <TableCell className=\"h-14 text-center font-medium\">\n                    {row.size}\n                  </TableCell>\n                  {columns.map((col) => (\n                    <TableCell\n                      key={col}\n                      className=\"h-14 text-center text-muted-foreground\"\n                    >\n                      {row[col as keyof SizeRow] || \"-\"}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce11.tsx"
    }
  ],
  "type": "registry:block"
}