dock-demo

1import { Calculator, Calendar, Compass, Mail, Music } from "lucide-react";
2import {
3  Dock,
4  DockIcon,
5  DockItem,
6  DockLabel,
7} from "@/registry/default/ui/dock";
8 
9export default function DockDemo() {
10  return (
11    <div className="flex h-32 items-end justify-center">
12      <Dock>
13        <DockItem>
14          <DockIcon>
15            <Compass />
16          </DockIcon>
17          <DockLabel>Safari</DockLabel>
18        </DockItem>
19 
20        <DockItem>
21          <DockIcon>
22            <Mail />
23          </DockIcon>
24          <DockLabel>Mail</DockLabel>
25        </DockItem>
26 
27        <DockItem>
28          <DockIcon>
29            <Calendar />
30          </DockIcon>
31          <DockLabel>Calendar</DockLabel>
32        </DockItem>
33 
34        <DockItem>
35          <DockIcon>
36            <Music />
37          </DockIcon>
38          <DockLabel>Music</DockLabel>
39        </DockItem>
40 
41        <DockItem>
42          <DockIcon>
43            <Calculator />
44          </DockIcon>
45          <DockLabel>Calculator</DockLabel>
46        </DockItem>
47      </Dock>
48    </div>
49  );
50}