nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionSelector
/
CollectionSelector.tsx
3.1 kB
114 lines
1'use client';
2
3import { Suspense } from 'react';
4import {
5 Stack,
6 Button,
7 Group,
8 FocusTrap,
9 Tabs,
10 ThemeIcon,
11 Scroller,
12 Loader,
13 Text,
14} from '@mantine/core';
15import CollectionSelectorMyCollections from '../collectionSelectorMyCollections/CollectionSelectorMyCollections';
16import CollectionSelectorOpenCollections from '../collectionSelectorOpenCollections/CollectionSelectorOpenCollections';
17import classes from './TabItem.module.css';
18import { Collection } from '@semble/types';
19import { FaSeedling } from 'react-icons/fa6';
20
21interface Props {
22 isOpen: boolean;
23 onClose: () => void;
24 onCancel: () => void;
25 onSave: (e: React.FormEvent) => void;
26 isSaving?: boolean;
27 selectedCollections: Collection[];
28 onSelectedCollectionsChange: (collectionIds: Collection[]) => void;
29}
30
31export default function CollectionSelector(props: Props) {
32 return (
33 <Stack gap={'xl'}>
34 <FocusTrap.InitialFocus />
35 <Tabs defaultValue={'myCollections'} keepMounted={false}>
36 <Tabs.List grow mb={'xs'} style={{ flexWrap: 'nowrap' }}>
37 <Scroller>
38 <Tabs.Tab classNames={classes} value="myCollections">
39 My Collections
40 </Tabs.Tab>
41 <Tabs.Tab
42 classNames={classes}
43 leftSection={
44 <ThemeIcon
45 variant="light"
46 radius={'xl'}
47 size={'xs'}
48 color="green"
49 >
50 <FaSeedling size={8} />
51 </ThemeIcon>
52 }
53 value="openCollections"
54 >
55 Open Collections
56 </Tabs.Tab>
57 </Scroller>
58 </Tabs.List>
59
60 <Tabs.Panel value="myCollections">
61 <Suspense
62 fallback={
63 <Stack align="center" gap="xs">
64 <Loader color="gray" />
65 </Stack>
66 }
67 >
68 <CollectionSelectorMyCollections
69 selectedCollections={props.selectedCollections}
70 onSelectedCollectionsChange={props.onSelectedCollectionsChange}
71 />
72 </Suspense>
73 </Tabs.Panel>
74
75 <Tabs.Panel value="openCollections">
76 <Suspense
77 fallback={
78 <Stack align="center" gap="xs">
79 <Loader color="gray" />
80 </Stack>
81 }
82 >
83 <CollectionSelectorOpenCollections
84 selectedCollections={props.selectedCollections}
85 onSelectedCollectionsChange={props.onSelectedCollectionsChange}
86 />
87 </Suspense>
88 </Tabs.Panel>
89 </Tabs>
90
91 {/* Action Buttons */}
92 <Group justify="space-between" gap="xs" grow>
93 <Button
94 variant="light"
95 color="gray"
96 size="md"
97 onClick={() => props.onCancel()}
98 >
99 Cancel
100 </Button>
101
102 <Button
103 size="md"
104 loading={props.isSaving}
105 onClick={(e) => {
106 props.onSave(e);
107 }}
108 >
109 Save
110 </Button>
111 </Group>
112 </Stack>
113 );
114}