24 lines
18 KiB
JSON
24 lines
18 KiB
JSON
{
|
|
"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"
|
|
}
|
|
]
|
|
}
|