nandi.uk
This repository has no description
1.7 kB
55 lines
1import { ActionIcon, Affix } from '@mantine/core';
2import { Fragment, useEffect, useState } from 'react';
3import { FiPlus } from 'react-icons/fi';
4import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
5import { useMediaQuery } from '@mantine/hooks';
6import { useNavbarContext } from '@/providers/navbar';
7import { useSearchParams } from 'next/navigation';
8
9export default function ComposerDrawer() {
10 const { mobileOpened, desktopOpened } = useNavbarContext();
11 const isDesktop = useMediaQuery('(min-width: 36em)', false); // "sm" breakpoint
12 const isNavOpen = isDesktop ? desktopOpened : mobileOpened;
13 const shouldShowFab = !isNavOpen;
14 const [opened, setOpened] = useState(false);
15
16 // share_target support. on android could be any of these.
17 const shareUrl = useSearchParams().get('addUrl');
18 const shareText = useSearchParams().get('addText');
19 const shareTitle = useSearchParams().get('addTitle');
20 const addUrl = shareUrl || shareText || shareTitle;
21
22 useEffect(() => {
23 if (addUrl) {
24 setOpened(true);
25 }
26 }, [addUrl]);
27
28 return (
29 <Fragment key={shouldShowFab.toString()}>
30 {shouldShowFab && (
31 <Affix
32 mt={'md'}
33 mx={{ base: 20, sm: 'xs' }}
34 mb={{ base: 100, sm: 'md' }}
35 style={{ zIndex: 102 }}
36 >
37 <ActionIcon
38 size="input-xl"
39 radius="xl"
40 variant="filled"
41 onClick={() => setOpened((prev) => !prev)}
42 >
43 <FiPlus size={30} />
44 </ActionIcon>
45 </Affix>
46 )}
47
48 <AddCardDrawer
49 isOpen={opened}
50 initialUrl={addUrl || undefined}
51 onClose={() => setOpened(false)}
52 />
53 </Fragment>
54 );
55}