{
  "name": "dashboard-05",
  "type": "registry:block",
  "registryDependencies": [
    "badge",
    "breadcrumb",
    "button",
    "card",
    "dropdown-menu",
    "input",
    "pagination",
    "progress",
    "separator",
    "sheet",
    "table",
    "tabs",
    "tooltip"
  ],
  "files": [
    {
      "path": "block/dashboard-05.tsx",
      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/new-york/ui/pagination\"\nimport { Progress } from \"@/registry/new-york/ui/progress\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"text-balance max-w-lg leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        {/* <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow> */}\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": ""
    }
  ]
}