nandi.uk
This repository has no description
2.3 kB
74 lines
1import type { UrlCard } from '@semble/types';
2import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
3import { Modal, Stack, Text } from '@mantine/core';
4import { Suspense } from 'react';
5import CollectionSelectorSkeleton from '@/features/collections/components/collectionSelector/Skeleton.CollectionSelector';
6import AddCardToModalContent from './AddCardToModalContent';
7import CardToBeAddedPreview from '../cardToBeAddedPreview/CardToBeAddedPreview';
8import { CardSaveAnalyticsContext } from '@/features/analytics/types';
9
10interface Props {
11 isOpen: boolean;
12 onClose: () => void;
13 url: string;
14 cardId?: string;
15 note?: string;
16 isInYourLibrary?: boolean;
17 urlLibraryCount: number;
18 viaCardId?: string;
19 cardContent?: UrlCard['cardContent'];
20 analyticsContext?: CardSaveAnalyticsContext;
21}
22
23export default function AddCardToModal(props: Props) {
24 const count = props.urlLibraryCount ?? 0;
25
26 const subtitle = (() => {
27 if (count === 0) return 'Not saved by anyone yet';
28
29 if (props.isInYourLibrary) {
30 if (count === 1) return 'Saved by you';
31 return `Saved by you and ${count - 1} other${count - 1 > 1 ? 's' : ''}`;
32 } else {
33 if (count === 1) return 'Saved by 1 person';
34 return `Saved by ${count} people`;
35 }
36 })();
37
38 return (
39 <Modal
40 opened={props.isOpen}
41 onClose={props.onClose}
42 title={
43 <Stack gap={0}>
44 <Text fw={600}>Add or update {props.cardId ? 'card' : 'link'}</Text>
45 <Text c="gray" fw={500}>
46 {subtitle}
47 </Text>
48 </Stack>
49 }
50 overlayProps={DEFAULT_OVERLAY_PROPS}
51 centered
52 onClick={(e) => e.stopPropagation()}
53 >
54 <Stack justify="space-between" gap={'xs'}>
55 <CardToBeAddedPreview
56 url={props.url}
57 title={props.cardContent?.title}
58 imageUrl={props.cardContent?.imageUrl}
59 />
60 <Suspense fallback={<CollectionSelectorSkeleton />}>
61 <AddCardToModalContent
62 onClose={props.onClose}
63 url={props.url}
64 cardId={props.cardId}
65 cardContent={props.cardContent}
66 note={props.note}
67 viaCardId={props.viaCardId}
68 analyticsContext={props.analyticsContext}
69 />
70 </Suspense>
71 </Stack>
72 </Modal>
73 );
74}