cosmik.network
A social knowledge tool for researchers built on ATProto
1import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
2import { Modal, Stack, Text } from '@mantine/core';
3import { Suspense } from 'react';
4import CollectionSelectorSkeleton from '@/features/collections/components/collectionSelector/Skeleton.CollectionSelector';
5import AddCardToModalContent from './AddCardToModalContent';
6
7interface Props {
8 isOpen: boolean;
9 onClose: () => void;
10 url: string;
11 cardId?: string;
12 note?: string;
13 urlLibraryCount?: number;
14 isInYourLibrary?: boolean;
15}
16
17export default function AddCardToModal(props: Props) {
18 const {
19 isOpen,
20 onClose,
21 url,
22 cardId,
23 note,
24 urlLibraryCount,
25 isInYourLibrary,
26 } = props;
27
28 const count = urlLibraryCount ?? 0;
29
30 const subtitle = (() => {
31 if (count === 0) return 'Not saved by anyone yet';
32
33 if (isInYourLibrary) {
34 if (count === 1) return 'Saved by you';
35 return `Saved by you and ${count - 1} other${count - 1 > 1 ? 's' : ''}`;
36 } else {
37 if (count === 1) return 'Saved by 1 person';
38 return `Saved by ${count} people`;
39 }
40 })();
41
42 return (
43 <Modal
44 opened={isOpen}
45 onClose={onClose}
46 title={
47 <Stack gap={0}>
48 <Text fw={600}>Add or update {props.cardId ? 'card' : 'link'}</Text>
49 <Text c="gray" fw={500}>
50 {subtitle}
51 </Text>
52 </Stack>
53 }
54 overlayProps={DEFAULT_OVERLAY_PROPS}
55 centered
56 onClick={(e) => e.stopPropagation()}
57 >
58 <Suspense fallback={<CollectionSelectorSkeleton />}>
59 <AddCardToModalContent
60 onClose={onClose}
61 url={url}
62 cardId={cardId}
63 note={note}
64 />
65 </Suspense>
66 </Modal>
67 );
68}