nandi.uk
This repository has no description
3.9 kB
138 lines
1import {
2 ActionIcon,
3 Affix,
4 Text,
5 Menu,
6 Stack,
7 Transition,
8 Card,
9 Overlay,
10} from '@mantine/core';
11import { Fragment, useState } from 'react';
12import { FiPlus, FiX } from 'react-icons/fi';
13import { FaRegNoteSticky } from 'react-icons/fa6';
14import { BiCollection } from 'react-icons/bi';
15import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
16import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
17import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
18
19export default function ComposerDrawer() {
20 const [opened, setOpened] = useState(false);
21 const [activeDrawer, setActiveDrawer] = useState<
22 'addCard' | 'createCollection' | null
23 >();
24
25 return (
26 <Fragment>
27 <Menu
28 opened={opened}
29 onChange={setOpened}
30 position="left-end"
31 transitionProps={{ transition: 'fade-left', enterDelay: 50 }}
32 radius={'lg'}
33 >
34 <Menu.Target>
35 <Affix m={'md'} style={{ zIndex: 103 }}>
36 <ActionIcon
37 size={'input-lg'}
38 radius="xl"
39 variant="filled"
40 h={'100%'}
41 >
42 <Transition
43 mounted={!opened}
44 transition="fade-left"
45 duration={200}
46 timingFunction="ease"
47 >
48 {(styles) => (
49 <FiPlus
50 size={26}
51 style={{ ...styles, position: 'absolute' }}
52 />
53 )}
54 </Transition>
55 <Transition
56 mounted={opened}
57 transition="fade-right"
58 duration={200}
59 timingFunction="ease"
60 >
61 {(styles) => (
62 <FiX size={26} style={{ ...styles, position: 'absolute' }} />
63 )}
64 </Transition>
65 </ActionIcon>
66 </Affix>
67 </Menu.Target>
68 <Menu.Dropdown
69 bg={'transparent'}
70 style={{
71 display: 'flex',
72 flexDirection: 'row',
73 border: 0,
74 gap: 12,
75 }}
76 py={0}
77 >
78 <Menu.Item
79 onClick={() => setActiveDrawer('addCard')}
80 p={0}
81 style={{ cursor: 'pointer' }}
82 >
83 <Card withBorder shadow="xl" radius={'lg'}>
84 <Stack gap={'xs'} c={'gray'}>
85 <FaRegNoteSticky size={22} />
86 <Text fw={600}>
87 New <br />
88 Card
89 </Text>
90 </Stack>
91 </Card>
92 </Menu.Item>
93 <Menu.Item
94 onClick={() => setActiveDrawer('createCollection')}
95 p={0}
96 style={{ cursor: 'pointer' }}
97 >
98 <Card withBorder shadow="xl" radius={'lg'}>
99 <Stack gap={'xs'} c={'gray'}>
100 <BiCollection size={22} />
101 <Text fw={600}>New Collection</Text>
102 </Stack>
103 </Card>
104 </Menu.Item>
105 </Menu.Dropdown>
106 </Menu>
107
108 <AddCardDrawer
109 isOpen={activeDrawer === 'addCard'}
110 onClose={() => setActiveDrawer(null)}
111 />
112 <CreateCollectionDrawer
113 isOpen={activeDrawer === 'createCollection'}
114 onClose={() => setActiveDrawer(null)}
115 />
116
117 <Transition
118 mounted={opened}
119 transition="fade"
120 duration={200}
121 timingFunction="ease"
122 >
123 {(styles) => (
124 <Overlay
125 fixed={true}
126 blur={DEFAULT_OVERLAY_PROPS.blur}
127 gradient={DEFAULT_OVERLAY_PROPS.gradient}
128 inset={DEFAULT_OVERLAY_PROPS.inset}
129 style={{
130 ...styles,
131 zIndex: 101,
132 }}
133 />
134 )}
135 </Transition>
136 </Fragment>
137 );
138}