shadcn-svelte for Svelte 5 has been released! - Visit the preview docs
Beautifully designed. Copy and paste into your apps. Open source.
<script lang="ts">
import ChevronLeft from "lucide-svelte/icons/chevron-left";
import ChevronRight from "lucide-svelte/icons/chevron-right";
import Copy from "lucide-svelte/icons/copy";
import CreditCard from "lucide-svelte/icons/credit-card";
import File from "lucide-svelte/icons/file";
import House from "lucide-svelte/icons/house";
import ChartLine from "lucide-svelte/icons/chart-line";
import ListFilter from "lucide-svelte/icons/list-filter";
import EllipsisVertical from "lucide-svelte/icons/ellipsis-vertical";
import Package from "lucide-svelte/icons/package";
import Package2 from "lucide-svelte/icons/package-2";
import PanelLeft from "lucide-svelte/icons/panel-left";
import Search from "lucide-svelte/icons/search";
import Settings from "lucide-svelte/icons/settings";
import ShoppingCart from "lucide-svelte/icons/shopping-cart";
import Truck from "lucide-svelte/icons/truck";
import UsersRound from "lucide-svelte/icons/users-round";
import { Badge } from "$lib/components/ui/badge/index.js";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Pagination from "$lib/components/ui/pagination/index.js";
import { Progress } from "$lib/components/ui/progress/index.js";
import { Separator } from "$lib/components/ui/separator/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import * as Tabs from "$lib/components/ui/tabs/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<div class="bg-muted/40 flex min-h-screen w-full flex-col">
<aside class="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
<nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:h-8 md:w-8 md:text-base"
>
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<House class="h-5 w-5" />
<span class="sr-only">Dashboard</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Dashboard</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="bg-accent text-accent-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ShoppingCart class="h-5 w-5" />
<span class="sr-only">Orders</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Orders</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Package class="h-5 w-5" />
<span class="sr-only">Products</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Products</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<UsersRound class="h-5 w-5" />
<span class="sr-only">Customers</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Customers</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ChartLine class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Analytics</Tooltip.Content>
</Tooltip.Root>
</nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Settings class="h-5 w-5" />
<span class="sr-only">Settings</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Settings</Tooltip.Content>
</Tooltip.Root>
</nav>
</aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header
class="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
>
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
<PanelLeft class="h-5 w-5" />
<span class="sr-only">Toggle Menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left" class="sm:max-w-xs">
<nav class="grid gap-6 text-lg font-medium">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
>
<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<House class="h-5 w-5" />
Dashboard
</a>
<a href="##" class="text-foreground flex items-center gap-4 px-2.5">
<ShoppingCart class="h-5 w-5" />
Orders
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<Package class="h-5 w-5" />
Products
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<UsersRound class="h-5 w-5" />
Customers
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<ChartLine class="h-5 w-5" />
Settings
</a>
</nav>
</Sheet.Content>
</Sheet.Root>
<Breadcrumb.Root class="hidden md:flex">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Orders</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Recent Orders</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<div class="relative ml-auto flex-1 md:grow-0">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search..."
class="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
variant="outline"
size="icon"
class="overflow-hidden rounded-full"
builders={[builder]}
>
<img
src="/images/placeholder-user.jpg"
width={36}
height={36}
alt="Avatar"
class="overflow-hidden rounded-full"
/>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>
<main
class="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"
>
<div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card.Root
class="sm:col-span-2"
data-x-chunk-name="dashboard-05-chunk-0"
data-x-chunk-description="A card for an orders dashboard with a description and a button to create a new order."
>
<Card.Header class="pb-3">
<Card.Title>Your Orders</Card.Title>
<Card.Description class="max-w-lg text-balance leading-relaxed">
Introducing Our Dynamic Orders Dashboard for Seamless Management and
Insightful Analysis.
</Card.Description>
</Card.Header>
<Card.Footer>
<Button>Create New Order</Button>
</Card.Footer>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-05-chunk-1"
data-x-chunk-description="A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar."
>
<Card.Header class="pb-2">
<Card.Description>This Week</Card.Description>
<Card.Title class="text-4xl">$1329</Card.Title>
</Card.Header>
<Card.Content>
<div class="text-muted-foreground text-xs">+25% from last week</div>
</Card.Content>
<Card.Footer>
<Progress value={25} aria-label="25% increase" />
</Card.Footer>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-05-chunk-2"
data-x-chunk-description="A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar."
>
<Card.Header class="pb-2">
<Card.Description>This Month</Card.Description>
<Card.Title class="text-3xl">$5,329</Card.Title>
</Card.Header>
<Card.Content>
<div class="text-muted-foreground text-xs">+10% from last month</div>
</Card.Content>
<Card.Footer>
<Progress value={12} aria-label="12% increase" />
</Card.Footer>
</Card.Root>
</div>
<Tabs.Root value="week">
<div class="flex items-center">
<Tabs.List>
<Tabs.Trigger value="week">Week</Tabs.Trigger>
<Tabs.Trigger value="month">Month</Tabs.Trigger>
<Tabs.Trigger value="year">Year</Tabs.Trigger>
</Tabs.List>
<div class="ml-auto flex items-center gap-2">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
variant="outline"
size="sm"
class="h-7 gap-1 text-sm"
builders={[builder]}
>
<ListFilter class="h-3.5 w-3.5" />
<span class="sr-only sm:not-sr-only">Filter</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Filter by</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.CheckboxItem checked>
Fulfilled
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem>Declined</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem>Refunded</DropdownMenu.CheckboxItem>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Button size="sm" variant="outline" class="h-7 gap-1 text-sm">
<File class="h-3.5 w-3.5" />
<span class="sr-only sm:not-sr-only">Export</span>
</Button>
</div>
</div>
<Tabs.Content value="week">
<Card.Root
data-x-chunk-name="dashboard-05-chunk-3"
data-x-chunk-description="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount."
>
<Card.Header class="px-7">
<Card.Title>Orders</Card.Title>
<Card.Description>Recent orders from your store.</Card.Description>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Customer</Table.Head>
<Table.Head class="hidden sm:table-cell">
Type
</Table.Head>
<Table.Head class="hidden sm:table-cell">
Status
</Table.Head>
<Table.Head class="hidden md:table-cell">
Date
</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row class="bg-accent">
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Sale
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-23
</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Olivia Smith</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Refund
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="outline">
Declined
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-24
</Table.Cell>
<Table.Cell class="text-right">$150.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Noah Williams</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Subscription
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-25
</Table.Cell>
<Table.Cell class="text-right">$350.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Emma Brown</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Sale
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-26
</Table.Cell>
<Table.Cell class="text-right">$450.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Sale
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-23
</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Sale
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-23
</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Olivia Smith</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Refund
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="outline">
Declined
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-24
</Table.Cell>
<Table.Cell class="text-right">$150.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Emma Brown</div>
<div
class="text-muted-foreground hidden text-sm md:inline"
>
[email protected]
</div>
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
Sale
</Table.Cell>
<Table.Cell class="hidden sm:table-cell">
<Badge class="text-xs" variant="secondary">
Fulfilled
</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-06-26
</Table.Cell>
<Table.Cell class="text-right">$450.00</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
</div>
<div>
<Card.Root
class="overflow-hidden"
data-x-chunk-name="dashboard-05-chunk-4"
data-x-chunk-description="An order details card with order details, shipping information, customer information and payment information."
>
<Card.Header class="bg-muted/50 flex flex-row items-start">
<div class="grid gap-0.5">
<Card.Title class="group flex items-center gap-2 text-lg">
Order Oe31b70H
<Button
size="icon"
variant="outline"
class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
>
<Copy class="h-3 w-3" />
<span class="sr-only">Copy Order ID</span>
</Button>
</Card.Title>
<Card.Description>Date: November 23, 2023</Card.Description>
</div>
<div class="ml-auto flex items-center gap-1">
<Button size="sm" variant="outline" class="h-8 gap-1">
<Truck class="h-3.5 w-3.5" />
<span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
Track Order
</span>
</Button>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
size="icon"
variant="outline"
class="h-8 w-8"
>
<EllipsisVertical class="h-3.5 w-3.5" />
<span class="sr-only">More</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Export</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Trash</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</Card.Header>
<Card.Content class="p-6 text-sm">
<div class="grid gap-3">
<div class="font-semibold">Order Details</div>
<ul class="grid gap-3">
<li class="flex items-center justify-between">
<span class="text-muted-foreground">
Glimmer Lamps x <span>2</span>
</span>
<span>$250.00</span>
</li>
<li class="flex items-center justify-between">
<span class="text-muted-foreground">
Aqua Filters x <span>1</span>
</span>
<span>$49.00</span>
</li>
</ul>
<Separator class="my-2" />
<ul class="grid gap-3">
<li class="flex items-center justify-between">
<span class="text-muted-foreground">Subtotal</span>
<span>$299.00</span>
</li>
<li class="flex items-center justify-between">
<span class="text-muted-foreground">Shipping</span>
<span>$5.00</span>
</li>
<li class="flex items-center justify-between">
<span class="text-muted-foreground">Tax</span>
<span>$25.00</span>
</li>
<li class="flex items-center justify-between font-semibold">
<span class="text-muted-foreground">Total</span>
<span>$329.00</span>
</li>
</ul>
</div>
<Separator class="my-4" />
<div class="grid grid-cols-2 gap-4">
<div class="grid gap-3">
<div class="font-semibold">Shipping Information</div>
<address class="text-muted-foreground grid gap-0.5 not-italic">
<span>Liam Johnson</span>
<span>1234 Main St.</span>
<span>Anytown, CA 12345</span>
</address>
</div>
<div class="grid auto-rows-max gap-3">
<div class="font-semibold">Billing Information</div>
<div class="text-muted-foreground">Same as shipping address</div>
</div>
</div>
<Separator class="my-4" />
<div class="grid gap-3">
<div class="font-semibold">Customer Information</div>
<dl class="grid gap-3">
<div class="flex items-center justify-between">
<dt class="text-muted-foreground">Customer</dt>
<dd>Liam Johnson</dd>
</div>
<div class="flex items-center justify-between">
<dt class="text-muted-foreground">Email</dt>
<dd>
<a href="mailto:">[email protected]</a>
</dd>
</div>
<div class="flex items-center justify-between">
<dt class="text-muted-foreground">Phone</dt>
<dd>
<a href="tel:">+1 234 567 890</a>
</dd>
</div>
</dl>
</div>
<Separator class="my-4" />
<div class="grid gap-3">
<div class="font-semibold">Payment Information</div>
<dl class="grid gap-3">
<div class="flex items-center justify-between">
<dt class="text-muted-foreground flex items-center gap-1">
<CreditCard class="h-4 w-4" />
Visa
</dt>
<dd>**** **** **** 4532</dd>
</div>
</dl>
</div>
</Card.Content>
<Card.Footer class="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
<div class="text-muted-foreground text-xs">
Updated <time dateTime="2023-11-23">November 23, 2023</time>
</div>
<Pagination.Root count={10} class="ml-auto mr-0 w-auto">
<Pagination.Content>
<Pagination.Item>
<Button size="icon" variant="outline" class="h-6 w-6">
<ChevronLeft class="h-3.5 w-3.5" />
<span class="sr-only">Previous Order</span>
</Button>
</Pagination.Item>
<Pagination.Item>
<Button size="icon" variant="outline" class="h-6 w-6">
<ChevronRight class="h-3.5 w-3.5" />
<span class="sr-only">Next Order</span>
</Button>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root>
</Card.Footer>
</Card.Root>
</div>
</main>
</div>
</div>
<script lang="ts">
import File from "lucide-svelte/icons/file";
import House from "lucide-svelte/icons/house";
import ChartLine from "lucide-svelte/icons/chart-line";
import ListFilter from "lucide-svelte/icons/list-filter";
import Ellipsis from "lucide-svelte/icons/ellipsis";
import Package from "lucide-svelte/icons/package";
import Package2 from "lucide-svelte/icons/package-2";
import PanelLeft from "lucide-svelte/icons/panel-left";
import CirclePlus from "lucide-svelte/icons/circle-plus";
import Search from "lucide-svelte/icons/search";
import Settings from "lucide-svelte/icons/settings";
import ShoppingCart from "lucide-svelte/icons/shopping-cart";
import UsersRound from "lucide-svelte/icons/users-round";
import { Badge } from "$lib/components/ui/badge/index.js";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import * as Tabs from "$lib/components/ui/tabs/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<div class="bg-muted/40 flex min-h-screen w-full flex-col">
<aside class="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
<nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:h-8 md:w-8 md:text-base"
>
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<House class="h-5 w-5" />
<span class="sr-only">Dashboard</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Dashboard</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="bg-accent text-accent-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ShoppingCart class="h-5 w-5" />
<span class="sr-only">Orders</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Orders</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Package class="h-5 w-5" />
<span class="sr-only">Products</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Products</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<UsersRound class="h-5 w-5" />
<span class="sr-only">Customers</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Customers</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ChartLine class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Analytics</Tooltip.Content>
</Tooltip.Root>
</nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Settings class="h-5 w-5" />
<span class="sr-only">Settings</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Settings</Tooltip.Content>
</Tooltip.Root>
</nav>
</aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header
class="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
>
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
<PanelLeft class="h-5 w-5" />
<span class="sr-only">Toggle Menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left" class="sm:max-w-xs">
<nav class="grid gap-6 text-lg font-medium">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
>
<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<House class="h-5 w-5" />
Dashboard
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<ShoppingCart class="h-5 w-5" />
Orders
</a>
<a href="##" class="text-foreground flex items-center gap-4 px-2.5">
<Package class="h-5 w-5" />
Products
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<UsersRound class="h-5 w-5" />
Customers
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<ChartLine class="h-5 w-5" />
Settings
</a>
</nav>
</Sheet.Content>
</Sheet.Root>
<Breadcrumb.Root class="hidden md:flex">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Products</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>All Products</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<div class="relative ml-auto flex-1 md:grow-0">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search..."
class="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="outline"
size="icon"
class="overflow-hidden rounded-full"
>
<img
src="/images/placeholder-user.jpg"
width={36}
height={36}
alt="Avatar"
class="overflow-hidden rounded-full"
/>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>
<main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<Tabs.Root value="all">
<div class="flex items-center">
<Tabs.List>
<Tabs.Trigger value="all">All</Tabs.Trigger>
<Tabs.Trigger value="active">Active</Tabs.Trigger>
<Tabs.Trigger value="draft">Draft</Tabs.Trigger>
<Tabs.Trigger value="archived" class="hidden sm:flex">
Archived
</Tabs.Trigger>
</Tabs.List>
<div class="ml-auto flex items-center gap-2">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="outline"
size="sm"
class="h-8 gap-1"
>
<ListFilter class="h-3.5 w-3.5" />
<span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
Filter
</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Filter by</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.CheckboxItem checked>
Active
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem>Draft</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem>Archived</DropdownMenu.CheckboxItem>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Button size="sm" variant="outline" class="h-8 gap-1">
<File class="h-3.5 w-3.5" />
<span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
Export
</span>
</Button>
<Button size="sm" class="h-8 gap-1">
<CirclePlus class="h-3.5 w-3.5" />
<span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
Add Product
</span>
</Button>
</div>
</div>
<Tabs.Content value="all">
<Card.Root
data-x-chunk-name="dashboard-06-chunk-0"
data-x-chunk-description="A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions."
>
<Card.Header>
<Card.Title>Products</Card.Title>
<Card.Description>
Manage your products and view their sales performance.
</Card.Description>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="hidden w-[100px] sm:table-cell">
<span class="sr-only">Image</span>
</Table.Head>
<Table.Head>Name</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head class="hidden md:table-cell">Price</Table.Head>
<Table.Head class="hidden md:table-cell">
Total Sales
</Table.Head>
<Table.Head class="hidden md:table-cell">
Created at
</Table.Head>
<Table.Head>
<span class="sr-only">Actions</span>
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product example"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
Laser Lemonade Machine
</Table.Cell>
<Table.Cell>
<Badge variant="outline">Draft</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
$499.99
</Table.Cell>
<Table.Cell class="hidden md:table-cell">25</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-07-12 10:42 AM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
builders={[builder]}
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
Hypernova Headphones
</Table.Cell>
<Table.Cell>
<Badge variant="outline">Active</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
$129.99
</Table.Cell>
<Table.Cell class="hidden md:table-cell">100</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-10-18 03:21 PM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
aria-haspopup="true"
size="icon"
variant="ghost"
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
AeroGlow Desk Lamp
</Table.Cell>
<Table.Cell>
<Badge variant="outline">Active</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">$39.99</Table.Cell>
<Table.Cell class="hidden md:table-cell">50</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-11-29 08:15 AM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
aria-haspopup="true"
size="icon"
variant="ghost"
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
TechTonic Energy Drink
</Table.Cell>
<Table.Cell>
<Badge variant="secondary">Draft</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">$2.99</Table.Cell>
<Table.Cell class="hidden md:table-cell">0</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2023-12-25 11:59 PM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
aria-haspopup="true"
size="icon"
variant="ghost"
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
Gamer Gear Pro Controller
</Table.Cell>
<Table.Cell>
<Badge variant="outline">Active</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">$59.99</Table.Cell>
<Table.Cell class="hidden md:table-cell">75</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2024-01-01 12:00 AM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
aria-haspopup="true"
size="icon"
variant="ghost"
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="hidden sm:table-cell">
<img
alt="Product"
class="aspect-square rounded-md object-cover"
height="64"
src="/images/placeholder.svg"
width="64"
/>
</Table.Cell>
<Table.Cell class="font-medium">
Luminous VR Headset
</Table.Cell>
<Table.Cell>
<Badge variant="outline">Active</Badge>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
$199.99
</Table.Cell>
<Table.Cell class="hidden md:table-cell">30</Table.Cell>
<Table.Cell class="hidden md:table-cell">
2024-02-14 02:14 PM
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
aria-haspopup="true"
size="icon"
variant="ghost"
>
<Ellipsis class="h-4 w-4" />
<span class="sr-only">Toggle menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item>Edit</DropdownMenu.Item>
<DropdownMenu.Item>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Card.Content>
<Card.Footer>
<div class="text-muted-foreground text-xs">
Showing <strong>1-10</strong> of <strong>32</strong> products
</div>
</Card.Footer>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
</main>
</div>
</div>
<script lang="ts">
import ChevronLeft from "lucide-svelte/icons/chevron-left";
import House from "lucide-svelte/icons/house";
import ChartLine from "lucide-svelte/icons/chart-line";
import Package from "lucide-svelte/icons/package";
import Package2 from "lucide-svelte/icons/package-2";
import PanelLeft from "lucide-svelte/icons/panel-left";
import CirclePlus from "lucide-svelte/icons/circle-plus";
import Search from "lucide-svelte/icons/search";
import Settings from "lucide-svelte/icons/settings";
import ShoppingCart from "lucide-svelte/icons/shopping-cart";
import Upload from "lucide-svelte/icons/upload";
import UsersRound from "lucide-svelte/icons/users-round";
import { Badge } from "$lib/components/ui/badge/index.js";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import { Textarea } from "$lib/components/ui/textarea/index.js";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<div class="bg-muted/40 flex min-h-screen w-full flex-col">
<aside class="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
<nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:h-8 md:w-8 md:text-base"
>
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<House class="h-5 w-5" />
<span class="sr-only">Dashboard</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Dashboard</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="bg-accent text-accent-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ShoppingCart class="h-5 w-5" />
<span class="sr-only">Orders</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Orders</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Package class="h-5 w-5" />
<span class="sr-only">Products</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Products</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<UsersRound class="h-5 w-5" />
<span class="sr-only">Customers</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Customers</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<ChartLine class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Analytics</Tooltip.Content>
</Tooltip.Root>
</nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8"
use:builder.action
{...builder}
>
<Settings class="h-5 w-5" />
<span class="sr-only">Settings</span>
</a>
</Tooltip.Trigger>
<Tooltip.Content side="right">Settings</Tooltip.Content>
</Tooltip.Root>
</nav>
</aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header
class="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
>
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
<PanelLeft class="h-5 w-5" />
<span class="sr-only">Toggle Menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left" class="sm:max-w-xs">
<nav class="grid gap-6 text-lg font-medium">
<a
href="##"
class="bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
>
<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span>
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<House class="h-5 w-5" />
Dashboard
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<ShoppingCart class="h-5 w-5" />
Orders
</a>
<a href="##" class="text-foreground flex items-center gap-4 px-2.5">
<Package class="h-5 w-5" />
Products
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<UsersRound class="h-5 w-5" />
Customers
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
>
<ChartLine class="h-5 w-5" />
Settings
</a>
</nav>
</Sheet.Content>
</Sheet.Root>
<Breadcrumb.Root class="hidden md:flex">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="##">Products</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Edit Product</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<div class="relative ml-auto flex-1 md:grow-0">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search..."
class="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="outline"
size="icon"
class="overflow-hidden rounded-full"
>
<img
src="/images/placeholder-user.jpg"
width={36}
height={36}
alt="Avatar"
class="overflow-hidden rounded-full"
/>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>
<main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<div class="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
<div class="flex items-center gap-4">
<Button variant="outline" size="icon" class="h-7 w-7">
<ChevronLeft class="h-4 w-4" />
<span class="sr-only">Back</span>
</Button>
<h1
class="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0"
>
Pro Controller
</h1>
<Badge variant="outline" class="ml-auto sm:ml-0">In stock</Badge>
<div class="hidden items-center gap-2 md:ml-auto md:flex">
<Button variant="outline" size="sm">Discard</Button>
<Button size="sm">Save Product</Button>
</div>
</div>
<div class="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
<div class="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
<Card.Root
data-x-chunk-name="dashboard-07-chunk-0"
data-x-chunk-description="A card with a form to edit the product details"
>
<Card.Header>
<Card.Title>Product Details</Card.Title>
<Card.Description>
Lipsum dolor sit amet, consectetur adipiscing elit
</Card.Description>
</Card.Header>
<Card.Content>
<div class="grid gap-6">
<div class="grid gap-3">
<Label for="name">Name</Label>
<Input
id="name"
type="text"
class="w-full"
value="Gamer Gear Pro Controller"
/>
</div>
<div class="grid gap-3">
<Label for="description">Description</Label>
<Textarea
id="description"
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
class="min-h-32"
/>
</div>
</div>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-07-chunk-1"
data-x-chunk-description="A card with a form to edit the product stock and variants"
>
<Card.Header>
<Card.Title>Stock</Card.Title>
<Card.Description>
Lipsum dolor sit amet, consectetur adipiscing elit
</Card.Description>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[100px]">SKU</Table.Head>
<Table.Head>Stock</Table.Head>
<Table.Head>Price</Table.Head>
<Table.Head class="w-[100px]">Size</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell class="font-semibold">GGPC-001</Table.Cell>
<Table.Cell>
<Label for="stock-1" class="sr-only">Stock</Label>
<Input id="stock-1" type="number" value="100" />
</Table.Cell>
<Table.Cell>
<Label for="price-1" class="sr-only">Price</Label>
<Input id="price-1" type="number" value="99.99" />
</Table.Cell>
<Table.Cell>
<ToggleGroup.Root
type="single"
value="s"
variant="outline"
>
<ToggleGroup.Item value="s">S</ToggleGroup.Item>
<ToggleGroup.Item value="m">M</ToggleGroup.Item>
<ToggleGroup.Item value="l">L</ToggleGroup.Item>
</ToggleGroup.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="font-semibold">GGPC-002</Table.Cell>
<Table.Cell>
<Label for="stock-2" class="sr-only">Stock</Label>
<Input id="stock-2" type="number" value="143" />
</Table.Cell>
<Table.Cell>
<Label for="price-2" class="sr-only">Price</Label>
<Input id="price-2" type="number" value="99.99" />
</Table.Cell>
<Table.Cell>
<ToggleGroup.Root
type="single"
value="m"
variant="outline"
>
<ToggleGroup.Item value="s">S</ToggleGroup.Item>
<ToggleGroup.Item value="m">M</ToggleGroup.Item>
<ToggleGroup.Item value="l">L</ToggleGroup.Item>
</ToggleGroup.Root>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell class="font-semibold">GGPC-003</Table.Cell>
<Table.Cell>
<Label for="stock-3" class="sr-only">Stock</Label>
<Input id="stock-3" type="number" value="32" />
</Table.Cell>
<Table.Cell>
<Label for="price-3" class="sr-only">Stock</Label>
<Input id="price-3" type="number" value="99.99" />
</Table.Cell>
<Table.Cell>
<ToggleGroup.Root
type="single"
value="s"
variant="outline"
>
<ToggleGroup.Item value="s">S</ToggleGroup.Item>
<ToggleGroup.Item value="m">M</ToggleGroup.Item>
<ToggleGroup.Item value="l">L</ToggleGroup.Item>
</ToggleGroup.Root>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Card.Content>
<Card.Footer class="justify-center border-t p-4">
<Button size="sm" variant="ghost" class="gap-1">
<CirclePlus class="h-3.5 w-3.5" />
Add Variant
</Button>
</Card.Footer>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-07-chunk-2"
data-x-chunk-description="A card with a form to edit the product category and subcategory"
>
<Card.Header>
<Card.Title>Product Category</Card.Title>
</Card.Header>
<Card.Content>
<div class="grid gap-6 sm:grid-cols-3">
<div class="grid gap-3">
<Label for="category">Category</Label>
<Select.Root>
<Select.Trigger
id="category"
aria-label="Select category"
>
<Select.Value placeholder="Select category" />
</Select.Trigger>
<Select.Content>
<Select.Item value="clothing" label="Clothing"
>Clothing</Select.Item
>
<Select.Item
value="electronics"
label="Electronics"
>
Electronics
</Select.Item>
<Select.Item
value="accessories"
label="Accessories"
>
Accessories
</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="grid gap-3">
<Label for="subcategory">Subcategory (optional)</Label>
<Select.Root>
<Select.Trigger
id="subcategory"
aria-label="Select subcategory"
>
<Select.Value placeholder="Select subcategory" />
</Select.Trigger>
<Select.Content>
<Select.Item value="t-shirts" label="T-Shirts"
>T-Shirts</Select.Item
>
<Select.Item value="hoodies" label="Hoodies"
>Hoodies</Select.Item
>
<Select.Item
value="sweatshirts"
label="Sweatshirts"
>
Sweatshirts
</Select.Item>
</Select.Content>
</Select.Root>
</div>
</div>
</Card.Content>
</Card.Root>
</div>
<div class="grid auto-rows-max items-start gap-4 lg:gap-8">
<Card.Root
data-x-chunk-name="dashboard-07-chunk-3"
data-x-chunk-description="A card with a form to edit the product status"
>
<Card.Header>
<Card.Title>Product Status</Card.Title>
</Card.Header>
<Card.Content>
<div class="grid gap-6">
<div class="grid gap-3">
<Label for="status">Status</Label>
<Select.Root>
<Select.Trigger id="status" aria-label="Select status">
<Select.Value placeholder="Select status" />
</Select.Trigger>
<Select.Content>
<Select.Item value="draft" label="Draft"
>Draft</Select.Item
>
<Select.Item value="published" label="Active"
>Active</Select.Item
>
<Select.Item value="archived" label="Archived"
>Archived</Select.Item
>
</Select.Content>
</Select.Root>
</div>
</div>
</Card.Content>
</Card.Root>
<Card.Root
class="overflow-hidden"
data-x-chunk-name="dashboard-07-chunk-4"
data-x-chunk-description="A card with a form to upload product images"
>
<Card.Header>
<Card.Title>Product Images</Card.Title>
<Card.Description>
Lipsum dolor sit amet, consectetur adipiscing elit
</Card.Description>
</Card.Header>
<Card.Content>
<div class="grid gap-2">
<img
alt="Product"
class="aspect-square w-full rounded-md object-cover"
height="300"
src="/images/placeholder.svg"
width="300"
/>
<div class="grid grid-cols-3 gap-2">
<button>
<img
alt="Product"
class="aspect-square w-full rounded-md object-cover"
height="84"
src="/images/placeholder.svg"
width="84"
/>
</button>
<button>
<img
alt="Product"
class="aspect-square w-full rounded-md object-cover"
height="84"
src="/images/placeholder.svg"
width="84"
/>
</button>
<button
class="flex aspect-square w-full items-center justify-center rounded-md border border-dashed"
>
<Upload class="text-muted-foreground h-4 w-4" />
<span class="sr-only">Upload</span>
</button>
</div>
</div>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-07-chunk-5"
data-x-chunk-description="A card with a call to action to archive the product"
>
<Card.Header>
<Card.Title>Archive Product</Card.Title>
<Card.Description>
Lipsum dolor sit amet, consectetur adipiscing elit.
</Card.Description>
</Card.Header>
<Card.Content>
<div></div>
<Button size="sm" variant="secondary">Archive Product</Button>
</Card.Content>
</Card.Root>
</div>
</div>
<div class="flex items-center justify-center gap-2 md:hidden">
<Button variant="outline" size="sm">Discard</Button>
<Button size="sm">Save Product</Button>
</div>
</div>
</main>
</div>
</div>
<script lang="ts">
import Activity from "lucide-svelte/icons/activity";
import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
import CircleUser from "lucide-svelte/icons/circle-user";
import CreditCard from "lucide-svelte/icons/credit-card";
import DollarSign from "lucide-svelte/icons/dollar-sign";
import Menu from "lucide-svelte/icons/menu";
import Package2 from "lucide-svelte/icons/package-2";
import Search from "lucide-svelte/icons/search";
import Users from "lucide-svelte/icons/users";
import * as Avatar from "$lib/components/ui/avatar/index.js";
import { Badge } from "$lib/components/ui/badge/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
import * as Table from "$lib/components/ui/table/index.js";
</script>
<div class="flex min-h-screen w-full flex-col">
<header class="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
<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"
>
<a href="##" class="flex items-center gap-2 text-lg font-semibold md:text-base">
<Package2 class="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</a>
<a href="##" class="text-foreground hover:text-foreground transition-colors">
Dashboard
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Orders
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Products
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Customers
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Analytics
</a>
</nav>
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button
variant="outline"
size="icon"
class="shrink-0 md:hidden"
builders={[builder]}
>
<Menu class="h-5 w-5" />
<span class="sr-only">Toggle navigation menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left">
<nav class="grid gap-6 text-lg font-medium">
<a href="##" class="flex items-center gap-2 text-lg font-semibold">
<Package2 class="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</a>
<a href="##" class="hover:text-foreground"> Dashboard </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Orders </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Products </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Customers </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Analytics </a>
</nav>
</Sheet.Content>
</Sheet.Root>
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
<form class="ml-auto flex-1 sm:flex-initial">
<div class="relative">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search products..."
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
/>
</div>
</form>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="secondary"
size="icon"
class="rounded-full"
>
<CircleUser class="h-5 w-5" />
<span class="sr-only">Toggle user menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</header>
<main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
<div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
<Card.Root
data-x-chunk-name="dashboard-01-chunk-0"
data-x-chunk-description="A card showing the total revenue in USD and the percentage difference from last month."
>
<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
<Card.Title class="text-sm font-medium">Total Revenue</Card.Title>
<DollarSign class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">$45,231.89</div>
<p class="text-muted-foreground text-xs">+20.1% from last month</p>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-01-chunk-1"
data-x-chunk-description="A card showing the total subscriptions and the percentage difference from last month."
>
<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
<Card.Title class="text-sm font-medium">Subscriptions</Card.Title>
<Users class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">+2350</div>
<p class="text-muted-foreground text-xs">+180.1% from last month</p>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-01-chunk-2"
data-x-chunk-description="A card showing the total sales and the percentage difference from last month."
>
<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
<Card.Title class="text-sm font-medium">Sales</Card.Title>
<CreditCard class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">+12,234</div>
<p class="text-muted-foreground text-xs">+19% from last month</p>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-01-chunk-3"
data-x-chunk-description="A card showing the total active users and the percentage difference from last hour."
>
<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
<Card.Title class="text-sm font-medium">Active Now</Card.Title>
<Activity class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">+573</div>
<p class="text-muted-foreground text-xs">+201 since last hour</p>
</Card.Content>
</Card.Root>
</div>
<div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card.Root
class="xl:col-span-2"
data-x-chunk-name="dashboard-01-chunk-4"
data-x-chunk-description="A card showing a table of recent transactions with a link to view all transactions."
>
<Card.Header class="flex flex-row items-center">
<div class="grid gap-2">
<Card.Title>Transactions</Card.Title>
<Card.Description>Recent transactions from your store.</Card.Description>
</div>
<Button href="##" size="sm" class="ml-auto gap-1">
View All
<ArrowUpRight class="h-4 w-4" />
</Button>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Customer</Table.Head>
<Table.Head class="xl:table.-column hidden">Type</Table.Head>
<Table.Head class="xl:table.-column hidden">Status</Table.Head>
<Table.Head class="xl:table.-column hidden">Date</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div class="text-muted-foreground hidden text-sm md:inline">
[email protected]
</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell
class="md:table.-cell xl:table.-column hidden lg:hidden"
>
2023-06-23
</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Olivia Smith</div>
<div class="text-muted-foreground hidden text-sm md:inline">
[email protected]
</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Refund</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Declined</Badge>
</Table.Cell>
<Table.Cell
class="md:table.-cell xl:table.-column hidden lg:hidden"
>
2023-06-24
</Table.Cell>
<Table.Cell class="text-right">$150.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Noah Williams</div>
<div class="text-muted-foreground hidden text-sm md:inline">
[email protected]
</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
Subscription
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell
class="md:table.-cell xl:table.-column hidden lg:hidden"
>
2023-06-25
</Table.Cell>
<Table.Cell class="text-right">$350.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Emma Brown</div>
<div class="text-muted-foreground hidden text-sm md:inline">
[email protected]
</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell
class="md:table.-cell xl:table.-column hidden lg:hidden"
>
2023-06-26
</Table.Cell>
<Table.Cell class="text-right">$450.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div class="text-muted-foreground hidden text-sm md:inline">
[email protected]
</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell
class="md:table.-cell xl:table.-column hidden lg:hidden"
>
2023-06-27
</Table.Cell>
<Table.Cell class="text-right">$550.00</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-01-chunk-5"
data-x-chunk-description="A card showing a list of recent sales with customer names and email addresses."
>
<Card.Header>
<Card.Title>Recent Sales</Card.Title>
</Card.Header>
<Card.Content class="grid gap-8">
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/01.png" alt="Avatar" />
<Avatar.Fallback>OM</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Olivia Martin</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$1,999.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/02.png" alt="Avatar" />
<Avatar.Fallback>JL</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Jackson Lee</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$39.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/03.png" alt="Avatar" />
<Avatar.Fallback>IN</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Isabella Nguyen</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$299.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/04.png" alt="Avatar" />
<Avatar.Fallback>WK</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">William Kim</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$99.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/05.png" alt="Avatar" />
<Avatar.Fallback>SD</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Sofia Davis</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$39.00</div>
</div>
</Card.Content>
</Card.Root>
</div>
</main>
</div>
<script lang="ts">
import CircleUser from "lucide-svelte/icons/circle-user";
import ChartLine from "lucide-svelte/icons/chart-line";
import Package from "lucide-svelte/icons/package";
import House from "lucide-svelte/icons/house";
import ShoppingCart from "lucide-svelte/icons/shopping-cart";
import Bell from "lucide-svelte/icons/bell";
import Menu from "lucide-svelte/icons/menu";
import Package2 from "lucide-svelte/icons/package-2";
import Search from "lucide-svelte/icons/search";
import Users from "lucide-svelte/icons/users";
import { Badge } from "$lib/components/ui/badge/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
</script>
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div class="bg-muted/40 hidden border-r md:block">
<div class="flex h-full max-h-screen flex-col gap-2">
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
<a href="/" class="flex items-center gap-2 font-semibold">
<Package2 class="h-6 w-6" />
<span class="">Acme Inc</span>
</a>
<Button variant="outline" size="icon" class="ml-auto h-8 w-8">
<Bell class="h-4 w-4" />
<span class="sr-only">Toggle notifications</span>
</Button>
</div>
<div class="flex-1">
<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
<a
href="##"
class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
>
<House class="h-4 w-4" />
Dashboard
</a>
<a
href="##"
class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
>
<ShoppingCart class="h-4 w-4" />
Orders
<Badge
class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
>
6
</Badge>
</a>
<a
href="##"
class="bg-muted text-primary hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
>
<Package class="h-4 w-4" />
Products
</a>
<a
href="##"
class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
>
<Users class="h-4 w-4" />
Customers
</a>
<a
href="##"
class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all"
>
<ChartLine class="h-4 w-4" />
Analytics
</a>
</nav>
</div>
<div class="mt-auto p-4">
<Card.Root
data-x-chunk-name="dashboard-02-chunk-0"
data-x-chunk-description="A card with a call to action"
>
<Card.Header class="p-2 pt-0 md:p-4">
<Card.Title>Upgrade to Pro</Card.Title>
<Card.Description>
Unlock all features and get unlimited access to our support team.
</Card.Description>
</Card.Header>
<Card.Content class="p-2 pt-0 md:p-4 md:pt-0">
<Button size="sm" class="w-full">Upgrade</Button>
</Card.Content>
</Card.Root>
</div>
</div>
</div>
<div class="flex flex-col">
<header class="bg-muted/40 flex h-14 items-center gap-4 border-b px-4 lg:h-[60px] lg:px-6">
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button
variant="outline"
size="icon"
class="shrink-0 md:hidden"
builders={[builder]}
>
<Menu class="h-5 w-5" />
<span class="sr-only">Toggle navigation menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left" class="flex flex-col">
<nav class="grid gap-2 text-lg font-medium">
<a href="##" class="flex items-center gap-2 text-lg font-semibold">
<Package2 class="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
>
<House class="h-5 w-5" />
Dashboard
</a>
<a
href="##"
class="bg-muted text-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
>
<ShoppingCart class="h-5 w-5" />
Orders
<Badge
class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
>
6
</Badge>
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
>
<Package class="h-5 w-5" />
Products
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
>
<Users class="h-5 w-5" />
Customers
</a>
<a
href="##"
class="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
>
<ChartLine class="h-5 w-5" />
Analytics
</a>
</nav>
<div class="mt-auto">
<Card.Root>
<Card.Header>
<Card.Title>Upgrade to Pro</Card.Title>
<Card.Description>
Unlock all features and get unlimited access to our support
team.
</Card.Description>
</Card.Header>
<Card.Content>
<Button size="sm" class="w-full">Upgrade</Button>
</Card.Content>
</Card.Root>
</div>
</Sheet.Content>
</Sheet.Root>
<div class="w-full flex-1">
<form>
<div class="relative">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search products..."
class="bg-background w-full appearance-none pl-8 shadow-none md:w-2/3 lg:w-1/3"
/>
</div>
</form>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="secondary"
size="icon"
class="rounded-full"
>
<CircleUser class="h-5 w-5" />
<span class="sr-only">Toggle user menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>
<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
<div class="flex items-center">
<h1 class="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
data-x-chunk-name="dashboard-02-chunk-1"
data-x-chunk-description="An empty state showing no products with a heading, description and a call to action to add a product."
class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
>
<div class="flex flex-col items-center gap-1 text-center">
<h3 class="text-2xl font-bold tracking-tight">You have no products</h3>
<p class="text-muted-foreground text-sm">
You can start selling as soon as you add a product.
</p>
<Button class="mt-4">Add Product</Button>
</div>
</div>
</main>
</div>
</div>
<script lang="ts">
import Triangle from "lucide-svelte/icons/triangle";
import Bot from "lucide-svelte/icons/bot";
import SquareTerminal from "lucide-svelte/icons/square-terminal";
import CodeXML from "lucide-svelte/icons/code-xml";
import Settings2 from "lucide-svelte/icons/settings-2";
import LifeBuoy from "lucide-svelte/icons/life-buoy";
import Book from "lucide-svelte/icons/book";
import SquareUser from "lucide-svelte/icons/square-user";
import Settings from "lucide-svelte/icons/settings";
import Rabbit from "lucide-svelte/icons/rabbit";
import Bird from "lucide-svelte/icons/bird";
import Turtle from "lucide-svelte/icons/turtle";
import Share from "lucide-svelte/icons/share";
import Paperclip from "lucide-svelte/icons/paperclip";
import Mic from "lucide-svelte/icons/mic";
import CornerDownLeft from "lucide-svelte/icons/corner-down-left";
import { Badge } from "$lib/components/ui/badge/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
import * as Drawer from "$lib/components/ui/drawer/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Textarea } from "$lib/components/ui/textarea/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import * as Select from "$lib/components/ui/select/index.js";
</script>
<div class="grid h-screen w-full pl-[53px]">
<aside class="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
<div class="border-b p-2">
<Button variant="outline" size="icon" aria-label="Home">
<Triangle class="fill-foreground size-5" />
</Button>
</div>
<nav class="grid gap-1 p-2">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="bg-muted rounded-lg"
aria-label="Playground"
builders={[builder]}
>
<SquareTerminal class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Playground</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="rounded-lg"
aria-label="Models"
builders={[builder]}
>
<Bot class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Models</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="rounded-lg"
aria-label="API"
builders={[builder]}
>
<CodeXML class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>API</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="rounded-lg"
aria-label="Documentation"
builders={[builder]}
>
<Book class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Documentation</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="rounded-lg"
aria-label="Settings"
builders={[builder]}
>
<Settings2 class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Settings</Tooltip.Content>
</Tooltip.Root>
</nav>
<nav class="mt-auto grid gap-1 p-2">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="mt-auto rounded-lg"
aria-label="Help"
builders={[builder]}
>
<LifeBuoy class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Help</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button
variant="ghost"
size="icon"
class="mt-auto rounded-lg"
aria-label="Account"
builders={[builder]}
>
<SquareUser class="size-5" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right" sideOffset={5}>Account</Tooltip.Content>
</Tooltip.Root>
</nav>
</aside>
<div class="flex flex-col">
<header
class="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4"
>
<h1 class="text-xl font-semibold">Playground</h1>
<Drawer.Root>
<Drawer.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" size="icon" class="md:hidden">
<Settings class="size-4" />
<span class="sr-only">Settings</span>
</Button>
</Drawer.Trigger>
<Drawer.Content class="max-h-[80vh]">
<Drawer.Header>
<Drawer.Title>Configuration</Drawer.Title>
<Drawer.Description>
Configure the settings for the model and messages.
</Drawer.Description>
</Drawer.Header>
<form class="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
<fieldset class="grid gap-6 rounded-lg border p-4">
<legend class="-ml-1 px-1 text-sm font-medium"> Settings </legend>
<div class="grid gap-3">
<Label for="model">Model</Label>
<Select.Root>
<Select.Trigger
id="model"
class="items-start [&_[data-description]]:hidden"
>
<Select.Value placeholder="Select a model" />
</Select.Trigger>
<Select.Content>
<Select.Item value="genesis" label="Neural Genesis">
<div
class="text-muted-foreground flex items-start gap-3"
>
<Rabbit class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Genesis
</span>
</p>
<p class="text-xs" data-description>
Our fastest model for general use cases.
</p>
</div>
</div>
</Select.Item>
<Select.Item value="explorer" label="Neural Explorer">
<div
class="text-muted-foreground flex items-start gap-3"
>
<Bird class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Explorer
</span>
</p>
<p class="text-xs" data-description>
Performance and speed for efficiency.
</p>
</div>
</div>
</Select.Item>
<Select.Item value="quantum" label="Neural Quantum">
<div
class="text-muted-foreground flex items-start gap-3"
>
<Turtle class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Quantum
</span>
</p>
<p class="text-xs" data-description>
The most powerful model for complex
computations.
</p>
</div>
</div>
</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="grid gap-3">
<Label for="temperature">Temperature</Label>
<Input id="temperature" type="number" placeholder="0.4" />
</div>
<div class="grid gap-3">
<Label for="top-p">Top P</Label>
<Input id="top-p" type="number" placeholder="0.7" />
</div>
<div class="grid gap-3">
<Label for="top-k">Top K</Label>
<Input id="top-k" type="number" placeholder="0.0" />
</div>
</fieldset>
<fieldset class="grid gap-6 rounded-lg border p-4">
<legend class="-ml-1 px-1 text-sm font-medium"> Messages </legend>
<div class="grid gap-3">
<Label for="role">Role</Label>
<Select.Root selected={{ value: "system", label: "System" }}>
<Select.Trigger>
<Select.Value placeholder="Select a role" />
</Select.Trigger>
<Select.Content>
<Select.Item value="system">System</Select.Item>
<Select.Item value="user">User</Select.Item>
<Select.Item value="assistant">Assistant</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="grid gap-3">
<Label for="content">Content</Label>
<Textarea id="content" placeholder="You are a..." />
</div>
</fieldset>
</form>
</Drawer.Content>
</Drawer.Root>
<Button variant="outline" size="sm" class="ml-auto gap-1.5 text-sm">
<Share class="size-3.5" />
Share
</Button>
</header>
<main class="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
class="relative hidden flex-col items-start gap-8 md:flex"
data-x-chunk-name="dashboard-03-chunk-0"
data-x-chunk-description="A settings form a configuring an AI model and messages."
>
<form class="grid w-full items-start gap-6">
<fieldset class="grid gap-6 rounded-lg border p-4">
<legend class="-ml-1 px-1 text-sm font-medium"> Settings </legend>
<div class="grid gap-3">
<Label for="model">Model</Label>
<Select.Root>
<Select.Trigger
id="model"
class="items-start [&_[data-description]]:hidden"
>
<Select.Value placeholder="Select a model" />
</Select.Trigger>
<Select.Content>
<Select.Item value="genesis">
<div class="text-muted-foreground flex items-start gap-3">
<Rabbit class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Genesis
</span>
</p>
<p class="text-xs" data-description>
Our fastest model for general use cases.
</p>
</div>
</div>
</Select.Item>
<Select.Item value="explorer">
<div class="text-muted-foreground flex items-start gap-3">
<Bird class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Explorer
</span>
</p>
<p class="text-xs" data-description>
Performance and speed for efficiency.
</p>
</div>
</div>
</Select.Item>
<Select.Item value="quantum">
<div class="text-muted-foreground flex items-start gap-3">
<Turtle class="size-5" />
<div class="grid gap-0.5">
<p>
Neural
<span class="text-foreground font-medium">
Quantum
</span>
</p>
<p class="text-xs" data-description>
The most powerful model for complex
computations.
</p>
</div>
</div>
</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="grid gap-3">
<Label for="temperature">Temperature</Label>
<Input id="temperature" type="number" placeholder="0.4" />
</div>
<div class="grid grid-cols-2 gap-4">
<div class="grid gap-3">
<Label for="top-p">Top P</Label>
<Input id="top-p" type="number" placeholder="0.7" />
</div>
<div class="grid gap-3">
<Label for="top-k">Top K</Label>
<Input id="top-k" type="number" placeholder="0.0" />
</div>
</div>
</fieldset>
<fieldset class="grid gap-6 rounded-lg border p-4">
<legend class="-ml-1 px-1 text-sm font-medium"> Messages </legend>
<div class="grid gap-3">
<Label for="role">Role</Label>
<Select.Root selected={{ value: "system", label: "system" }}>
<Select.Trigger>
<Select.Value placeholder="Select a role" />
</Select.Trigger>
<Select.Content>
<Select.Item value="system">System</Select.Item>
<Select.Item value="user">User</Select.Item>
<Select.Item value="assistant">Assistant</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="grid gap-3">
<Label for="content">Content</Label>
<Textarea
id="content"
placeholder="You are a..."
class="min-h-[9.5rem]"
/>
</div>
</fieldset>
</form>
</div>
<div
class="bg-muted/50 relative flex h-full min-h-[50vh] flex-col rounded-xl p-4 lg:col-span-2"
>
<Badge variant="outline" class="absolute right-3 top-3">Output</Badge>
<div class="flex-1" />
<form
class="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1"
data-x-chunk-name="dashboard-03-chunk-1"
data-x-chunk-description="A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio."
>
<Label for="message" class="sr-only">Message</Label>
<Textarea
id="message"
placeholder="Type your message here..."
class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
/>
<div class="flex items-center p-3 pt-0">
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button variant="ghost" size="icon" builders={[builder]}>
<Paperclip class="size-4" />
<span class="sr-only">Attach file</span>
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="top">Attach File</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button variant="ghost" size="icon" builders={[builder]}>
<Mic class="size-4" />
<span class="sr-only">Use Microphone</span>
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="top">Use Microphone</Tooltip.Content>
</Tooltip.Root>
<Button type="submit" size="sm" class="ml-auto gap-1.5">
Send Message
<CornerDownLeft class="size-3.5" />
</Button>
</div>
</form>
</div>
</main>
</div>
</div>
<script lang="ts">
import CircleUser from "lucide-svelte/icons/circle-user";
import Menu from "lucide-svelte/icons/menu";
import Package2 from "lucide-svelte/icons/package-2";
import Search from "lucide-svelte/icons/search";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Sheet from "$lib/components/ui/sheet/index.js";
</script>
<div class="flex min-h-screen w-full flex-col">
<header class="bg-background sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
<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"
>
<a href="##" class="flex items-center gap-2 text-lg font-semibold md:text-base">
<Package2 class="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Dashboard
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Orders
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Products
</a>
<a href="##" class="text-muted-foreground hover:text-foreground transition-colors">
Customers
</a>
<a href="##" class="text-foreground hover:text-foreground transition-colors">
Settings
</a>
</nav>
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button
variant="outline"
size="icon"
class="shrink-0 md:hidden"
builders={[builder]}
>
<Menu class="h-5 w-5" />
<span class="sr-only">Toggle navigation menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="left">
<nav class="grid gap-6 text-lg font-medium">
<a href="##" class="flex items-center gap-2 text-lg font-semibold">
<Package2 class="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Dashboard </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Orders </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Products </a>
<a href="##" class="text-muted-foreground hover:text-foreground"> Customers </a>
<a href="##" class="hover:text-foreground"> Settings </a>
</nav>
</Sheet.Content>
</Sheet.Root>
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
<form class="ml-auto flex-1 sm:flex-initial">
<div class="relative">
<Search class="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
<Input
type="search"
placeholder="Search products..."
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
/>
</div>
</form>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="secondary"
size="icon"
class="rounded-full"
>
<CircleUser class="h-5 w-5" />
<span class="sr-only">Toggle user menu</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</header>
<main
class="bg-muted/40 flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10"
>
<div class="mx-auto grid w-full max-w-6xl gap-2">
<h1 class="text-3xl font-semibold">Settings</h1>
</div>
<div
class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
>
<nav
class="text-muted-foreground grid gap-4 text-sm"
data-x-chunk-name="dashboard-04-chunk-0"
data-x-chunk-description="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
data-x-chunk-container="chunk-container after:right-0"
>
<a href="##" class="text-primary font-semibold"> General </a>
<a href="##">Security</a>
<a href="##">Integrations</a>
<a href="##">Support</a>
<a href="##">Organizations</a>
<a href="##">Advanced</a>
</nav>
<div class="grid gap-6">
<Card.Root
data-x-chunk-name="dashboard-04-chunk-1"
data-x-chunk-description="A form to update the store name."
>
<Card.Header>
<Card.Title>Store Name</Card.Title>
<Card.Description>
Used to identify your store in the marketplace.
</Card.Description>
</Card.Header>
<Card.Content>
<form>
<Input placeholder="Store Name" />
</form>
</Card.Content>
<Card.Footer class="border-t px-6 py-4">
<Button>Save</Button>
</Card.Footer>
</Card.Root>
<Card.Root
data-x-chunk-name="dashboard-04-chunk-2"
data-x-chunk-description="A form to update the plugins directory with a checkbox to allow administrators to change the directory."
>
<Card.Header>
<Card.Title>Plugins Directory</Card.Title>
<Card.Description>
The directory within your project, in which your plugins are located.
</Card.Description>
</Card.Header>
<Card.Content>
<form class="flex flex-col gap-4">
<Input placeholder="Project Name" value="/content/plugins" />
<div class="flex items-center space-x-2">
<Checkbox id="include" checked={true} />
<label
for="include"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Allow administrators to change the directory.
</label>
</div>
</form>
</Card.Content>
<Card.Footer class="border-t px-6 py-4">
<Button>Save</Button>
</Card.Footer>
</Card.Root>
</div>
</div>
</main>
</div>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Card.Root class="w-full max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to login to your account.</Card.Description>
</Card.Header>
<Card.Content class="grid gap-4">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input id="password" type="password" required />
</div>
</Card.Content>
<Card.Footer>
<Button class="w-full">Sign in</Button>
</Card.Footer>
</Card.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to login to your account</Card.Description>
</Card.Header>
<Card.Content>
<div class="grid gap-4">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<a href="##" class="ml-auto inline-block text-sm underline">
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</div>
<Button type="submit" class="w-full">Login</Button>
<Button variant="outline" class="w-full">Login with Google</Button>
</div>
<div class="mt-4 text-center text-sm">
Don't have an account?
<a href="##" class="underline">Sign up</a>
</div>
</Card.Content>
</Card.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
<Card.Title class="text-xl">Sign Up</Card.Title>
<Card.Description>Enter your information to create an account</Card.Description>
</Card.Header>
<Card.Content>
<div class="grid gap-4">
<div class="grid grid-cols-2 gap-4">
<div class="grid gap-2">
<Label for="first-name">First name</Label>
<Input id="first-name" placeholder="Max" required />
</div>
<div class="grid gap-2">
<Label for="last-name">Last name</Label>
<Input id="last-name" placeholder="Robinson" required />
</div>
</div>
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input id="password" type="password" />
</div>
<Button type="submit" class="w-full">Create an account</Button>
<Button variant="outline" class="w-full">Sign up with GitHub</Button>
</div>
<div class="mt-4 text-center text-sm">
Already have an account?
<a href="##" class="underline"> Sign in </a>
</div>
</Card.Content>
</Card.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
<div class="flex items-center justify-center py-12">
<div class="mx-auto grid w-[350px] gap-6">
<div class="grid gap-2 text-center">
<h1 class="text-3xl font-bold">Login</h1>
<p class="text-muted-foreground text-balance">
Enter your email below to login to your account
</p>
</div>
<div class="grid gap-4">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<a href="##" class="ml-auto inline-block text-sm underline">
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</div>
<Button type="submit" class="w-full">Login</Button>
<Button variant="outline" class="w-full">Login with Google</Button>
</div>
<div class="mt-4 text-center text-sm">
Don't have an account?
<a href="##" class="underline"> Sign up </a>
</div>
</div>
</div>
<div class="bg-muted hidden lg:block">
<img
src="/images/placeholder.svg"
alt="placeholder"
width="1920"
height="1080"
class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
</div>