Something went wrong. Try again.
A social knowledge tool for research trails, built on ATProto semble.so
research-tool social-network tools-for-thought atproto
Something went wrong. Try again.
3.2 kB · 129 lines
TSX
at development
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130import { Button, Container, Drawer, Group, Stack, Textarea, TextInput,} from '@mantine/core';import { useForm } from '@mantine/form';import useCreateCollection from '../../lib/mutations/useCreateCollection';import { notifications } from '@mantine/notifications';import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
interface Props { isOpen: boolean; onClose: () => void; initialName?: string; onCreate?: (newCollection: { id: string; name: string; cardCount: number; }) => void;}
export default function createCollectionDrawer(props: Props) { const createCollection = useCreateCollection(); const form = useForm({ initialValues: { name: props.initialName ?? '', description: '', }, });
const handleCreateCollection = (e: React.FormEvent) => { e.preventDefault();
createCollection.mutate( { name: form.getValues().name, description: form.getValues().description, }, { onSuccess: (newCollection) => { props.onClose(); props.onCreate && props.onCreate({ id: newCollection.collectionId, name: form.getValues().name, cardCount: 0, }); }, onError: () => { notifications.show({ message: 'Could not create collection.', }); }, onSettled: () => { form.reset(); }, }, ); };
return ( <Drawer opened={props.isOpen} onClose={props.onClose} withCloseButton={false} position="bottom" size={'30rem'} overlayProps={DEFAULT_OVERLAY_PROPS} > <Drawer.Header> <Drawer.Title fz={'xl'} fw={600} mx={'auto'}> Create Collection </Drawer.Title> </Drawer.Header>
<Container size={'sm'}> <form> <Stack> <TextInput id="name" label="Name" type="text" placeholder="Collection name" variant="filled" size="md" required maxLength={100} key={form.key('name')} {...form.getInputProps('name')} />
<Textarea id="description" label="Description" placeholder="Describe what this collection is about" variant="filled" size="md" rows={8} maxLength={500} key={form.key('description')} {...form.getInputProps('description')} /> <Group justify="space-between" gap={'xs'} grow> <Button variant="light" size="md" color={'gray'} onClick={props.onClose} > Cancel </Button> <Button onClick={handleCreateCollection} size="md" loading={createCollection.isPending} > Create </Button> </Group> </Stack> </form> </Container> </Drawer> );}