1  import { useNavigate } from '@tanstack/react-router';
 2  import {
 3    SpeedDial,
 4    SpeedDialAction,
 5    SpeedDialContent,
 6    SpeedDialItem,
 7    SpeedDialLabel,
 8    SpeedDialTrigger,
 9  } from '@/components/ui/speed-dial';
10  import FluentAdd24Filled from '~icons/fluent/add-24-filled';
11  import MingcuteNewFolderLine from '~icons/mingcute/new-folder-line';
12  import MingcuteRss2Fill from '~icons/mingcute/rss-2-fill';
13  
14  export function AppSpeedDial() {
15    const navigate = useNavigate();
16  
17    return (
18      <SpeedDial>
19        <SpeedDialTrigger className="transition-transform duration-200 ease-out data-[state=closed]:rotate-0 data-[state=open]:rotate-135">
20          <FluentAdd24Filled />
21        </SpeedDialTrigger>
22        <SpeedDialContent>
23          <SpeedDialItem>
24            <SpeedDialLabel>Add new feed</SpeedDialLabel>
25            <SpeedDialAction
26              onSelect={() => navigate({ to: '/dashboard/feed/new' })}
27            >
28              <MingcuteRss2Fill />
29            </SpeedDialAction>
30          </SpeedDialItem>
31          <SpeedDialItem>
32            <SpeedDialLabel>Add new folder</SpeedDialLabel>
33            <SpeedDialAction
34              onSelect={() =>
35                navigate({
36                  search: (prev: any) => ({ ...prev, modal: 'add-folder' }),
37                })
38              }
39            >
40              <MingcuteNewFolderLine />
41            </SpeedDialAction>
42          </SpeedDialItem>
43        </SpeedDialContent>
44      </SpeedDial>
45    );
46  }