Speed Dial Demo

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