dock-social-demo

1import {
2  Facebook,
3  Github,
4  Instagram,
5  Linkedin,
6  Twitter,
7  Youtube,
8} from "lucide-react";
9import {
10  Dock,
11  DockIcon,
12  DockItem,
13  DockLabel,
14} from "@/registry/default/ui/dock";
15 
16export default function DockSocialDemo() {
17  return (
18    <div className="flex h-32 items-end justify-center">
19      <Dock
20        magnification={60}
21        distance={100}
22        className="border-none bg-transparent shadow-none"
23      >
24        <DockItem className="bg-black/5 dark:bg-white/10">
25          <DockIcon>
26            <Github />
27          </DockIcon>
28          <DockLabel>GitHub</DockLabel>
29        </DockItem>
30 
31        <DockItem className="bg-blue-500/10 text-blue-500">
32          <DockIcon>
33            <Twitter />
34          </DockIcon>
35          <DockLabel>Twitter</DockLabel>
36        </DockItem>
37 
38        <DockItem className="bg-pink-500/10 text-pink-500">
39          <DockIcon>
40            <Instagram />
41          </DockIcon>
42          <DockLabel>Instagram</DockLabel>
43        </DockItem>
44 
45        <DockItem className="bg-blue-700/10 text-blue-700">
46          <DockIcon>
47            <Linkedin />
48          </DockIcon>
49          <DockLabel>LinkedIn</DockLabel>
50        </DockItem>
51 
52        <DockItem className="bg-blue-600/10 text-blue-600">
53          <DockIcon>
54            <Facebook />
55          </DockIcon>
56          <DockLabel>Facebook</DockLabel>
57        </DockItem>
58 
59        <DockItem className="bg-red-600/10 text-red-600">
60          <DockIcon>
61            <Youtube />
62          </DockIcon>
63          <DockLabel>YouTube</DockLabel>
64        </DockItem>
65      </Dock>
66    </div>
67  );
68}