{
  "name": "products-01",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "checkbox",
    "dropdown-menu",
    "pagination",
    "select",
    "table",
    "tabs"
  ],
  "files": [
    {
      "path": "blocks/products-01/components/ProductsTable.vue",
      "type": "registry:file",
      "target": "blocks/products-01/components/ProductsTable.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ArrowUpDownIcon,\n  EllipsisVerticalIcon,\n  ListFilterIcon,\n  PlusIcon,\n} from \"@lucide/vue\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/components/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n\nconst props = defineProps<{\n  products: {\n    id: string\n    name: string\n    price: number\n    stock: number\n    dateAdded: string\n    status: string\n  }[]\n}>()\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col gap-4\">\n    <div class=\"flex items-center justify-between gap-4\">\n      <Tabs default-value=\"all\">\n        <TabsList>\n          <TabsTrigger value=\"all\">\n            All Products\n          </TabsTrigger>\n          <TabsTrigger value=\"in-stock\">\n            In Stock\n          </TabsTrigger>\n          <TabsTrigger value=\"low-stock\">\n            Low Stock\n          </TabsTrigger>\n          <TabsTrigger value=\"archived\">\n            Archived\n          </TabsTrigger>\n          <TabsTrigger value=\"add-product\" as-child>\n            <button>\n              <PlusIcon />\n            </button>\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n      <div class=\"flex items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8\">\n        <Select default-value=\"all\">\n          <SelectTrigger>\n            <span class=\"text-muted-foreground text-sm\">Category:</span>\n            <SelectValue placeholder=\"Select a product\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">\n              All\n            </SelectItem>\n            <SelectItem value=\"in-stock\">\n              In Stock\n            </SelectItem>\n            <SelectItem value=\"low-stock\">\n              Low Stock\n            </SelectItem>\n            <SelectItem value=\"archived\">\n              Archived\n            </SelectItem>\n          </SelectContent>\n        </Select>\n        <Select default-value=\"all\">\n          <SelectTrigger>\n            <span class=\"text-muted-foreground text-sm\">Price:</span>\n            <SelectValue placeholder=\"Select a product\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">\n              $100-$200\n            </SelectItem>\n            <SelectItem value=\"in-stock\">\n              $200-$300\n            </SelectItem>\n            <SelectItem value=\"low-stock\">\n              $300-$400\n            </SelectItem>\n            <SelectItem value=\"archived\">\n              $400-$500\n            </SelectItem>\n          </SelectContent>\n        </Select>\n        <Select default-value=\"all\">\n          <SelectTrigger>\n            <span class=\"text-muted-foreground text-sm\">Status:</span>\n            <SelectValue placeholder=\"Select a product\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">\n              In Stock\n            </SelectItem>\n            <SelectItem value=\"in-stock\">\n              Low Stock\n            </SelectItem>\n            <SelectItem value=\"low-stock\">\n              Archived\n            </SelectItem>\n            <SelectItem value=\"archived\">\n              Archived\n            </SelectItem>\n          </SelectContent>\n        </Select>\n        <Button variant=\"outline\" size=\"icon\">\n          <ListFilterIcon />\n        </Button>\n        <Button variant=\"outline\" size=\"icon\">\n          <ArrowUpDownIcon />\n        </Button>\n      </div>\n    </div>\n    <div class=\"rounded-lg\">\n      <Table>\n        <TableHeader class=\"bg-muted/50\">\n          <TableRow class=\"!border-0\">\n            <TableHead class=\"w-12 rounded-l-lg px-4\">\n              <Checkbox />\n            </TableHead>\n            <TableHead>Product</TableHead>\n            <TableHead class=\"text-right\">\n              Price\n            </TableHead>\n            <TableHead class=\"text-right\">\n              Stock\n            </TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Date Added</TableHead>\n            <TableHead class=\"rounded-r-lg\" />\n          </TableRow>\n        </TableHeader>\n        <TableBody class=\"**:data-[slot=table-cell]:py-2.5\">\n          <TableRow v-for=\"product in products\" :key=\"product.id\">\n            <TableCell class=\"px-4\">\n              <Checkbox />\n            </TableCell>\n            <TableCell class=\"font-medium\">\n              {{ product.name }}\n            </TableCell>\n            <TableCell class=\"text-right\">\n              ${{ product.price.toFixed(2) }}\n            </TableCell>\n            <TableCell class=\"text-right\">\n              {{ product.stock }}\n            </TableCell>\n            <TableCell>\n              <Badge\n                variant=\"secondary\"\n                :class=\"\n                  product.status === 'Low Stock'\n                    ? 'border-orange-500 bg-transparent text-orange-500 dark:border-orange-500 dark:bg-transparent dark:text-orange-500'\n                    : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100'\n                \"\n              >\n                {{ product.status }}\n              </Badge>\n            </TableCell>\n            <TableCell>\n              {{ new Date(product.dateAdded).toLocaleDateString(\"en-US\", {\n                month: \"long\",\n                day: \"numeric\",\n                year: \"numeric\",\n              }) }}\n            </TableCell>\n            <TableCell>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\" class=\"size-6\">\n                    <EllipsisVerticalIcon />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n    <div class=\"flex justify-end\">\n      <Pagination :items-per-page=\"10\">\n        <PaginationContent>\n          <PaginationPrevious href=\"#\" />\n          <PaginationItem :value=\"1\">\n            1\n          </PaginationItem>\n          <PaginationItem :value=\"2\">\n            2\n          </PaginationItem>\n          <PaginationItem :value=\"3\">\n            3\n          </PaginationItem>\n\n          <PaginationEllipsis />\n\n          <PaginationNext href=\"#\" />\n        </PaginationContent>\n      </Pagination>\n    </div>\n  </div>\n</template>\n"
    },
    {
      "path": "blocks/products-01/page.vue",
      "type": "registry:file",
      "target": "blocks/products-01/page.vue",
      "content": "<script setup lang=\"ts\">\nimport ProductsTable from \"./components/ProductsTable.vue\"\n\n// Load from database.\nconst products = [\n  {\n    id: \"1\",\n    name: \"BJÖRKSNÄS Dining Table\",\n    price: 599.99,\n    stock: 12,\n    dateAdded: \"2023-06-15\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"2\",\n    name: \"POÄNG Armchair\",\n    price: 249.99,\n    stock: 28,\n    dateAdded: \"2023-07-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"3\",\n    name: \"MALM Bed Frame\",\n    price: 399.99,\n    stock: 15,\n    dateAdded: \"2023-08-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"4\",\n    name: \"KALLAX Shelf Unit\",\n    price: 179.99,\n    stock: 32,\n    dateAdded: \"2023-09-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"5\",\n    name: \"STOCKHOLM Rug\",\n    price: 299.99,\n    stock: 8,\n    dateAdded: \"2023-10-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"6\",\n    name: \"KIVIK Sofa\",\n    price: 899.99,\n    stock: 6,\n    dateAdded: \"2023-11-02\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"7\",\n    name: \"LISABO Coffee Table\",\n    price: 149.99,\n    stock: 22,\n    dateAdded: \"2023-11-29\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"8\",\n    name: \"HEMNES Bookcase\",\n    price: 249.99,\n    stock: 17,\n    dateAdded: \"2023-12-10\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"9\",\n    name: \"EKEDALEN Dining Chairs (Set of 2)\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-01-05\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"10\",\n    name: \"FRIHETEN Sleeper Sofa\",\n    price: 799.99,\n    stock: 9,\n    dateAdded: \"2024-01-18\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"11\",\n    name: \"NORDEN Extendable Table\",\n    price: 499.99,\n    stock: 11,\n    dateAdded: \"2024-01-25\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"12\",\n    name: \"BILLY Bookcase\",\n    price: 129.99,\n    stock: 42,\n    dateAdded: \"2024-02-03\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"13\",\n    name: \"STRANDMON Wing Chair\",\n    price: 349.99,\n    stock: 16,\n    dateAdded: \"2024-02-12\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"14\",\n    name: \"MALM Dresser\",\n    price: 279.99,\n    stock: 19,\n    dateAdded: \"2024-02-27\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"15\",\n    name: \"BRIMNES TV Unit\",\n    price: 149.99,\n    stock: 23,\n    dateAdded: \"2024-03-08\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"16\",\n    name: \"SÖDERHAMN Sectional Sofa\",\n    price: 1299.99,\n    stock: 5,\n    dateAdded: \"2024-03-15\",\n    status: \"Low Stock\",\n  },\n  {\n    id: \"17\",\n    name: \"BEKANT Desk\",\n    price: 249.99,\n    stock: 18,\n    dateAdded: \"2024-03-22\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"18\",\n    name: \"IVAR Storage System\",\n    price: 199.99,\n    stock: 14,\n    dateAdded: \"2024-04-01\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"19\",\n    name: \"RIBBA Picture Frame Set\",\n    price: 49.99,\n    stock: 36,\n    dateAdded: \"2024-04-09\",\n    status: \"In Stock\",\n  },\n  {\n    id: \"20\",\n    name: \"EKTORP Loveseat\",\n    price: 499.99,\n    stock: 12,\n    dateAdded: \"2024-04-15\",\n    status: \"In Stock\",\n  },\n]\n</script>\n\n<template>\n  <div class=\"flex h-full flex-1 flex-col gap-4 rounded-xl p-4\">\n    <ProductsTable :products />\n  </div>\n</template>\n"
    }
  ]
}