{
  "name": "Dashboard01",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "dropdown-menu",
    "input",
    "sheet",
    "table"
  ],
  "files": [
    {
      "path": "block/Dashboard01.vue",
      "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\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      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "Dashboard01.vue"
    }
  ]
}