Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(blocks): add TooltipProvider for Dashboard03,05,06,07 (#562)

Browse Source
This commit is contained in:
David Dong 2024-05-22 20:06:08 +08:00 committed by GitHub
parent dce0bd0c30
commit e63eec02e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 440 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
apps/www/src/lib/registry/default/block/Dashboard03.vue
View File

@ -14,7 +14,7 @@ import { Input } from '@/lib/registry/default/ui/input'
import { Label } from '@/lib/registry/default/ui/label' import { Label } from '@/lib/registry/default/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
import { Textarea } from '@/lib/registry/default/ui/textarea' import { Textarea } from '@/lib/registry/default/ui/textarea'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/ui/tooltip' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/default/ui/tooltip'
</script> </script>
<template> <template>
@ -26,113 +26,127 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/
</Button> </Button>
</div> </div>
<nav class="grid gap-1 p-2"> <nav class="grid gap-1 p-2">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<Button <TooltipTrigger as-child>
variant="ghost" <Button
size="icon" variant="ghost"
class="rounded-lg bg-muted" size="icon"
aria-label="Playground" class="rounded-lg bg-muted"
> aria-label="Playground"
<SquareTerminal class="size-5" /> >
</Button> <SquareTerminal class="size-5" />
</TooltipTrigger> </Button>
<TooltipContent side="right" :side-offset="5"> </TooltipTrigger>
Playground <TooltipContent side="right" :side-offset="5">
</TooltipContent> Playground
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<Button <TooltipProvider>
variant="ghost" <Tooltip>
size="icon" <TooltipTrigger as-child>
class="rounded-lg" <Button
aria-label="Models" variant="ghost"
> size="icon"
<Bot class="size-5" /> class="rounded-lg"
</Button> aria-label="Models"
</TooltipTrigger> >
<TooltipContent side="right" :side-offset="5"> <Bot class="size-5" />
Models </Button>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="right" :side-offset="5">
<Tooltip> Models
<TooltipTrigger as-child> </TooltipContent>
<Button </Tooltip>
variant="ghost" </TooltipProvider>
size="icon" <TooltipProvider>
class="rounded-lg" <Tooltip>
aria-label="API" <TooltipTrigger as-child>
> <Button
<Code2 class="size-5" /> variant="ghost"
</Button> size="icon"
</TooltipTrigger> class="rounded-lg"
<TooltipContent side="right" :side-offset="5"> aria-label="API"
API >
</TooltipContent> <Code2 class="size-5" />
</Tooltip> </Button>
<Tooltip> </TooltipTrigger>
<TooltipTrigger as-child> <TooltipContent side="right" :side-offset="5">
<Button API
variant="ghost" </TooltipContent>
size="icon" </Tooltip>
class="rounded-lg" </TooltipProvider>
aria-label="Documentation" <TooltipProvider>
> <Tooltip>
<Book class="size-5" /> <TooltipTrigger as-child>
</Button> <Button
</TooltipTrigger> variant="ghost"
<TooltipContent side="right" :side-offset="5"> size="icon"
Documentation class="rounded-lg"
</TooltipContent> aria-label="Documentation"
</Tooltip> >
<Tooltip> <Book class="size-5" />
<TooltipTrigger as-child> </Button>
<Button </TooltipTrigger>
variant="ghost" <TooltipContent side="right" :side-offset="5">
size="icon" Documentation
class="rounded-lg" </TooltipContent>
aria-label="Settings" </Tooltip>
> </TooltipProvider>
<Settings2 class="size-5" /> <TooltipProvider>
</Button> <Tooltip>
</TooltipTrigger> <TooltipTrigger as-child>
<TooltipContent side="right" :side-offset="5"> <Button
Settings variant="ghost"
</TooltipContent> size="icon"
</Tooltip> class="rounded-lg"
aria-label="Settings"
>
<Settings2 class="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" :side-offset="5">
Settings
</TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
<nav class="mt-auto grid gap-1 p-2"> <nav class="mt-auto grid gap-1 p-2">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<Button <TooltipTrigger as-child>
variant="ghost" <Button
size="icon" variant="ghost"
class="mt-auto rounded-lg" size="icon"
aria-label="Help" class="mt-auto rounded-lg"
> aria-label="Help"
<LifeBuoy class="size-5" /> >
</Button> <LifeBuoy class="size-5" />
</TooltipTrigger> </Button>
<TooltipContent side="right" :side-offset="5"> </TooltipTrigger>
Help <TooltipContent side="right" :side-offset="5">
</TooltipContent> Help
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<Button <TooltipProvider>
variant="ghost" <Tooltip>
size="icon" <TooltipTrigger as-child>
class="mt-auto rounded-lg" <Button
aria-label="Account" variant="ghost"
> size="icon"
<SquareUser class="size-5" /> class="mt-auto rounded-lg"
</Button> aria-label="Account"
</TooltipTrigger> >
<TooltipContent side="right" :side-offset="5"> <SquareUser class="size-5" />
Account </Button>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="right" :side-offset="5">
Account
</TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
</aside> </aside>
<div class="flex flex-col"> <div class="flex flex-col">
@ -406,28 +420,32 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/
class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0" 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"> <div class="flex items-center p-3 pt-0">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<Button variant="ghost" size="icon"> <TooltipTrigger as-child>
<Paperclip class="size-4" /> <Button variant="ghost" size="icon">
<span class="sr-only">Attach file</span> <Paperclip class="size-4" />
</Button> <span class="sr-only">Attach file</span>
</TooltipTrigger> </Button>
<TooltipContent side="top"> </TooltipTrigger>
Attach File <TooltipContent side="top">
</TooltipContent> Attach File
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<Button variant="ghost" size="icon"> <TooltipProvider>
<Mic class="size-4" /> <Tooltip>
<span class="sr-only">Use Microphone</span> <TooltipTrigger as-child>
</Button> <Button variant="ghost" size="icon">
</TooltipTrigger> <Mic class="size-4" />
<TooltipContent side="top"> <span class="sr-only">Use Microphone</span>
Use Microphone </Button>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="top">
Use Microphone
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button type="submit" size="sm" class="ml-auto gap-1.5"> <Button type="submit" size="sm" class="ml-auto gap-1.5">
Send Message Send Message
<CornerDownLeft class="size-3.5" /> <CornerDownLeft class="size-3.5" />

184
apps/www/src/lib/registry/default/block/Dashboard05.vue
View File

@ -63,6 +63,7 @@ import {
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from '@/lib/registry/default/ui/tooltip' } from '@/lib/registry/default/ui/tooltip'
import { Checkbox } from '@/lib/registry/default/ui/checkbox' import { Checkbox } from '@/lib/registry/default/ui/checkbox'
@ -79,92 +80,107 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" /> <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span> <span class="sr-only">Acme Inc</span>
</a> </a>
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Home class="h-5 w-5" /> >
<span class="sr-only">Dashboard</span> <Home class="h-5 w-5" />
</a> <span class="sr-only">Dashboard</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Dashboard <TooltipContent side="right">
</TooltipContent> Dashboard
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<a <TooltipProvider>
href="#" <Tooltip>
class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8" <TooltipTrigger as-child>
> <a
<ShoppingCart class="h-5 w-5" /> href="#"
<span class="sr-only">Orders</span> class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
</a> >
</TooltipTrigger> <ShoppingCart class="h-5 w-5" />
<TooltipContent side="right"> <span class="sr-only">Orders</span>
Orders </a>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="right">
<Tooltip> Orders
<TooltipTrigger as-child> </TooltipContent>
<a </Tooltip>
href="#" </TooltipProvider>
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
> <TooltipProvider>
<Package class="h-5 w-5" /> <Tooltip>
<span class="sr-only">Products</span> <TooltipTrigger as-child>
</a> <a
</TooltipTrigger> href="#"
<TooltipContent side="right"> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
Products >
</TooltipContent> <Package class="h-5 w-5" />
</Tooltip> <span class="sr-only">Products</span>
<Tooltip> </a>
<TooltipTrigger as-child> </TooltipTrigger>
<a <TooltipContent side="right">
href="#" Products
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" </TooltipContent>
> </Tooltip>
<Users2 class="h-5 w-5" /> </TooltipProvider>
<span class="sr-only">Customers</span>
</a> <TooltipProvider>
</TooltipTrigger> <Tooltip>
<TooltipContent side="right"> <TooltipTrigger as-child>
Customers <a
</TooltipContent> href="#"
</Tooltip> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Tooltip> >
<TooltipTrigger as-child> <Users2 class="h-5 w-5" />
<a <span class="sr-only">Customers</span>
href="#" </a>
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" </TooltipTrigger>
> <TooltipContent side="right">
<LineChart class="h-5 w-5" /> Customers
<span class="sr-only">Analytics</span> </TooltipContent>
</a> </Tooltip>
</TooltipTrigger> </TooltipProvider>
<TooltipContent side="right">
Analytics <TooltipProvider>
</TooltipContent> <Tooltip>
</Tooltip> <TooltipTrigger as-child>
<a
href="#"
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</TooltipTrigger>
<TooltipContent side="right">
Analytics
</TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5"> <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Settings class="h-5 w-5" /> >
<span class="sr-only">Settings</span> <Settings class="h-5 w-5" />
</a> <span class="sr-only">Settings</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Settings <TooltipContent side="right">
</TooltipContent> Settings
</Tooltip> </TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
</aside> </aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14"> <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">

181
apps/www/src/lib/registry/default/block/Dashboard06.vue
View File

@ -53,6 +53,7 @@ import {
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from '@/lib/registry/default/ui/tooltip' } from '@/lib/registry/default/ui/tooltip'
</script> </script>
@ -68,92 +69,104 @@ import {
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" /> <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span> <span class="sr-only">Acme Inc</span>
</a> </a>
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Home class="h-5 w-5" /> >
<span class="sr-only">Dashboard</span> <Home class="h-5 w-5" />
</a> <span class="sr-only">Dashboard</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Dashboard <TooltipContent side="right">
</TooltipContent> Dashboard
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<a <TooltipProvider>
href="#" <Tooltip>
class="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8" <TooltipTrigger as-child>
> <a
<ShoppingCart class="h-5 w-5" /> href="#"
<span class="sr-only">Orders</span> class="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
</a> >
</TooltipTrigger> <ShoppingCart class="h-5 w-5" />
<TooltipContent side="right"> <span class="sr-only">Orders</span>
Orders </a>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="right">
<Tooltip> Orders
<TooltipTrigger as-child> </TooltipContent>
<a </Tooltip>
href="#" </TooltipProvider>
class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8" <TooltipProvider>
> <Tooltip>
<Package class="h-5 w-5" /> <TooltipTrigger as-child>
<span class="sr-only">Products</span> <a
</a> href="#"
</TooltipTrigger> class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<TooltipContent side="right"> >
Products <Package class="h-5 w-5" />
</TooltipContent> <span class="sr-only">Products</span>
</Tooltip> </a>
<Tooltip> </TooltipTrigger>
<TooltipTrigger as-child> <TooltipContent side="right">
<a Products
href="#" </TooltipContent>
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" </Tooltip>
> </TooltipProvider>
<Users2 class="h-5 w-5" /> <TooltipProvider>
<span class="sr-only">Customers</span> <Tooltip>
</a> <TooltipTrigger as-child>
</TooltipTrigger> <a
<TooltipContent side="right"> href="#"
Customers class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
</TooltipContent> >
</Tooltip> <Users2 class="h-5 w-5" />
<Tooltip> <span class="sr-only">Customers</span>
<TooltipTrigger as-child> </a>
<a </TooltipTrigger>
href="#" <TooltipContent side="right">
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" Customers
> </TooltipContent>
<LineChart class="h-5 w-5" /> </Tooltip>
<span class="sr-only">Analytics</span> </TooltipProvider>
</a> <TooltipProvider>
</TooltipTrigger> <Tooltip>
<TooltipContent side="right"> <TooltipTrigger as-child>
Analytics <a
</TooltipContent> href="#"
</Tooltip> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</TooltipTrigger>
<TooltipContent side="right">
Analytics
</TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 py-4"> <nav class="mt-auto flex flex-col items-center gap-4 px-2 py-4">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Settings class="h-5 w-5" /> >
<span class="sr-only">Settings</span> <Settings class="h-5 w-5" />
</a> <span class="sr-only">Settings</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Settings <TooltipContent side="right">
</TooltipContent> Settings
</Tooltip> </TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
</aside> </aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14"> <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">

181
apps/www/src/lib/registry/default/block/Dashboard07.vue
View File

@ -56,6 +56,7 @@ import {
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from '@/lib/registry/default/ui/tooltip' } from '@/lib/registry/default/ui/tooltip'
</script> </script>
@ -71,92 +72,104 @@ import {
<Package2 class="h-4 w-4 transition-all group-hover:scale-110" /> <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
<span class="sr-only">Acme Inc</span> <span class="sr-only">Acme Inc</span>
</a> </a>
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Home class="h-5 w-5" /> >
<span class="sr-only">Dashboard</span> <Home class="h-5 w-5" />
</a> <span class="sr-only">Dashboard</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Dashboard <TooltipContent side="right">
</TooltipContent> Dashboard
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger as-child> </TooltipProvider>
<a <TooltipProvider>
href="#" <Tooltip>
class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8" <TooltipTrigger as-child>
> <a
<ShoppingCart class="h-5 w-5" /> href="#"
<span class="sr-only">Orders</span> class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
</a> >
</TooltipTrigger> <ShoppingCart class="h-5 w-5" />
<TooltipContent side="right"> <span class="sr-only">Orders</span>
Orders </a>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="right">
<Tooltip> Orders
<TooltipTrigger as-child> </TooltipContent>
<a </Tooltip>
href="#" </TooltipProvider>
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" <TooltipProvider>
> <Tooltip>
<Package class="h-5 w-5" /> <TooltipTrigger as-child>
<span class="sr-only">Products</span> <a
</a> href="#"
</TooltipTrigger> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<TooltipContent side="right"> >
Products <Package class="h-5 w-5" />
</TooltipContent> <span class="sr-only">Products</span>
</Tooltip> </a>
<Tooltip> </TooltipTrigger>
<TooltipTrigger as-child> <TooltipContent side="right">
<a Products
href="#" </TooltipContent>
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" </Tooltip>
> </TooltipProvider>
<Users2 class="h-5 w-5" /> <TooltipProvider>
<span class="sr-only">Customers</span> <Tooltip>
</a> <TooltipTrigger as-child>
</TooltipTrigger> <a
<TooltipContent side="right"> href="#"
Customers class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
</TooltipContent> >
</Tooltip> <Users2 class="h-5 w-5" />
<Tooltip> <span class="sr-only">Customers</span>
<TooltipTrigger as-child> </a>
<a </TooltipTrigger>
href="#" <TooltipContent side="right">
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" Customers
> </TooltipContent>
<LineChart class="h-5 w-5" /> </Tooltip>
<span class="sr-only">Analytics</span> </TooltipProvider>
</a> <TooltipProvider>
</TooltipTrigger> <Tooltip>
<TooltipContent side="right"> <TooltipTrigger as-child>
Analytics <a
</TooltipContent> href="#"
</Tooltip> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart class="h-5 w-5" />
<span class="sr-only">Analytics</span>
</a>
</TooltipTrigger>
<TooltipContent side="right">
Analytics
</TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
<nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5"> <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip> <TooltipProvider>
<TooltipTrigger as-child> <Tooltip>
<a <TooltipTrigger as-child>
href="#" <a
class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" href="#"
> class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
<Settings class="h-5 w-5" /> >
<span class="sr-only">Settings</span> <Settings class="h-5 w-5" />
</a> <span class="sr-only">Settings</span>
</TooltipTrigger> </a>
<TooltipContent side="right"> </TooltipTrigger>
Settings <TooltipContent side="right">
</TooltipContent> Settings
</Tooltip> </TooltipContent>
</Tooltip>
</TooltipProvider>
</nav> </nav>
</aside> </aside>
<div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14"> <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">