products-01.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "products-01",
  "type": "registry:block",
  "description": "A table of products",
  "registryDependencies": [
    "checkbox",
    "badge",
    "button",
    "dropdown-menu",
    "pagination",
    "table",
    "tabs",
    "select"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/blocks/products-01/page.tsx",
      "content": "import { ProductsTable } from \"@/registry/new-york-v4/blocks/products-01/components/products-table\"\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\nexport default function ProductsPage() {\n  return (\n    <div className=\"flex h-full flex-1 flex-col gap-4 rounded-xl p-4\">\n      <ProductsTable products={products} />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/products/page.tsx"
    },
    {
      "path": "registry/new-york-v4/blocks/products-01/components/products-table.tsx",
      "content": "import {\n  ArrowUpDownIcon,\n  EllipsisVerticalIcon,\n  ListFilterIcon,\n  PlusIcon,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york-v4/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/new-york-v4/ui/tabs\"\n\nexport function ProductsTable({\n  products,\n}: {\n  products: {\n    id: string\n    name: string\n    price: number\n    stock: number\n    dateAdded: string\n    status: string\n  }[]\n}) {\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Tabs defaultValue=\"all\">\n          <TabsList>\n            <TabsTrigger value=\"all\">All Products</TabsTrigger>\n            <TabsTrigger value=\"in-stock\">In Stock</TabsTrigger>\n            <TabsTrigger value=\"low-stock\">Low Stock</TabsTrigger>\n            <TabsTrigger value=\"archived\">Archived</TabsTrigger>\n            <TabsTrigger value=\"add-product\" asChild>\n              <button>\n                <PlusIcon />\n              </button>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"flex items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8\">\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Category:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"in-stock\">In Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Price:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">$100-$200</SelectItem>\n              <SelectItem value=\"in-stock\">$200-$300</SelectItem>\n              <SelectItem value=\"low-stock\">$300-$400</SelectItem>\n              <SelectItem value=\"archived\">$400-$500</SelectItem>\n            </SelectContent>\n          </Select>\n          <Select defaultValue=\"all\">\n            <SelectTrigger>\n              <span className=\"text-muted-foreground text-sm\">Status:</span>\n              <SelectValue placeholder=\"Select a product\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">In Stock</SelectItem>\n              <SelectItem value=\"in-stock\">Low Stock</SelectItem>\n              <SelectItem value=\"low-stock\">Archived</SelectItem>\n              <SelectItem value=\"archived\">Archived</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 className=\"rounded-lg\">\n        <Table>\n          <TableHeader className=\"bg-muted/50\">\n            <TableRow className=\"!border-0\">\n              <TableHead className=\"w-12 rounded-l-lg px-4\">\n                <Checkbox />\n              </TableHead>\n              <TableHead>Product</TableHead>\n              <TableHead className=\"text-right\">Price</TableHead>\n              <TableHead className=\"text-right\">Stock</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Date Added</TableHead>\n              <TableHead className=\"rounded-r-lg\" />\n            </TableRow>\n          </TableHeader>\n          <TableBody className=\"**:data-[slot=table-cell]:py-2.5\">\n            {products.map((product) => (\n              <TableRow key={product.id}>\n                <TableCell className=\"px-4\">\n                  <Checkbox />\n                </TableCell>\n                <TableCell className=\"font-medium\">{product.name}</TableCell>\n                <TableCell className=\"text-right\">\n                  ${product.price.toFixed(2)}\n                </TableCell>\n                <TableCell className=\"text-right\">{product.stock}</TableCell>\n                <TableCell>\n                  <Badge\n                    variant=\"secondary\"\n                    className={\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 asChild>\n                      <Button variant=\"ghost\" size=\"icon\" className=\"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            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex justify-end\">\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">1</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\" isActive>\n                2\n              </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\">3</PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationEllipsis />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}