Floating Dock Demo

1'use client';
2 
3import {
4  IconBrandGithub,
5  IconBrandLinkedin,
6  IconBrandX,
7  IconMail,
8} from '@tabler/icons-react';
9import {
10  FloatingDock,
11  type DockItemData,
12} from '@/components/azemmur/components/azemmur/floating-dock';
13import type { DockVariantProps } from '@/components/azemmur/components/azemmur/floating-dock/dock-variants';
14 
15const firstSet: DockItemData[] = [
16  {
17    title: 'GitHub',
18    icon: <IconBrandGithub className="size-full" />,
19    href: 'https://github.com',
20  },
21  {
22    title: 'LinkedIn',
23    icon: <IconBrandLinkedin className="size-full" />,
24    href: 'https://linkedin.com',
25  },
26];
27const secondSet: DockItemData[] = [
28  {
29    title: 'X (Twitter)',
30    icon: <IconBrandX className="size-full" />,
31    href: 'https://x.com',
32  },
33  {
34    title: 'Email',
35    icon: <IconMail className="size-full" />,
36    href: 'bWFpbHRvOmhlbGxvQGV4YW1wbGUuY29t',
37    obfuscated: true,
38  },
39];
40 
41export default function FloatingDockDemo({
42  orientation,
43  size,
44  intent,
45  styling,
46  shape,
47  elevation,
48}: DockVariantProps) {
49  return (
50    <div className="flex items-center justify-center h-[400px] w-full">
51      <FloatingDock
52        orientation={orientation}
53        size={size}
54        intent={intent}
55        styling={styling}
56        shape={shape}
57        elevation={elevation}
58      >
59        {firstSet.map((item) => (
60          <FloatingDock.Item key={item.title} item={item} />
61        ))}
62        <FloatingDock.Separator />
63        {secondSet.map((item) => (
64          <FloatingDock.Item key={item.title} item={item} />
65        ))}
66      </FloatingDock>
67    </div>
68  );
69}