dock-macos-demo

1import {
2  Calculator,
3  Calendar,
4  Camera,
5  ChromeIcon,
6  Clock,
7  Image,
8  Mail,
9  MessageSquare,
10  Music,
11  Notebook,
12  Settings,
13  Store,
14  Terminal,
15  Trash2,
16} from "lucide-react";
17import {
18  Dock,
19  DockIcon,
20  DockItem,
21  DockLabel,
22  DockSeparator,
23} from "@/registry/default/ui/dock";
24 
25export default function DockMacosDemo() {
26  return (
27    <div className="flex h-32 items-end justify-center">
28      <Dock magnification={80} distance={150}>
29        <DockItem>
30          <DockIcon>
31            <ChromeIcon />
32          </DockIcon>
33          <DockLabel>Chrome</DockLabel>
34        </DockItem>
35        <DockItem>
36          <DockIcon>
37            <Calendar />
38          </DockIcon>
39          <DockLabel>Calendar</DockLabel>
40        </DockItem>
41 
42        <DockItem>
43          <DockIcon>
44            <Mail />
45          </DockIcon>
46          <DockLabel>Mail</DockLabel>
47        </DockItem>
48 
49        <DockItem>
50          <DockIcon>
51            <MessageSquare />
52          </DockIcon>
53          <DockLabel>Messages</DockLabel>
54        </DockItem>
55 
56        <DockItem>
57          <DockIcon>
58            <Music />
59          </DockIcon>
60          <DockLabel>Music</DockLabel>
61        </DockItem>
62 
63        <DockItem>
64          <DockIcon>
65            <Image />
66          </DockIcon>
67          <DockLabel>Photos</DockLabel>
68        </DockItem>
69 
70        <DockSeparator />
71 
72        <DockItem>
73          <DockIcon>
74            <Store />
75          </DockIcon>
76          <DockLabel>App Store</DockLabel>
77        </DockItem>
78 
79        <DockItem>
80          <DockIcon>
81            <Calculator />
82          </DockIcon>
83          <DockLabel>Calculator</DockLabel>
84        </DockItem>
85 
86        <DockItem>
87          <DockIcon>
88            <Clock />
89          </DockIcon>
90          <DockLabel>Clock</DockLabel>
91        </DockItem>
92 
93        <DockItem>
94          <DockIcon>
95            <Notebook />
96          </DockIcon>
97          <DockLabel>Notes</DockLabel>
98        </DockItem>
99 
100        <DockItem>
101          <DockIcon>
102            <Terminal />
103          </DockIcon>
104          <DockLabel>Terminal</DockLabel>
105        </DockItem>
106 
107        <DockItem>
108          <DockIcon>
109            <Settings />
110          </DockIcon>
111          <DockLabel>System Settings</DockLabel>
112        </DockItem>
113 
114        <DockSeparator />
115 
116        <DockItem>
117          <DockIcon>
118            <Camera />
119          </DockIcon>
120          <DockLabel>Camera</DockLabel>
121        </DockItem>
122 
123        <DockItem>
124// … truncated