nandi.uk
This repository has no description
2.1 kB
76 lines
1import type { UrlCard } from '@/api-client/types';
2import { getDomain } from '@/lib/utils/link';
3import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
4import {
5 Anchor,
6 AspectRatio,
7 Card,
8 Group,
9 Modal,
10 Stack,
11 Text,
12 Image,
13 Tooltip,
14} from '@mantine/core';
15import Link from 'next/link';
16
17interface Props {
18 isOpen: boolean;
19 onClose: () => void;
20 note: UrlCard['note'];
21 urlCardContent: UrlCard['cardContent'];
22}
23
24export default function NoteCardModal(props: Props) {
25 const domain = getDomain(props.urlCardContent.url);
26
27 return (
28 <Modal
29 opened={props.isOpen}
30 onClose={props.onClose}
31 title="Note"
32 overlayProps={UPDATE_OVERLAY_PROPS}
33 centered
34 onClick={(e) => e.stopPropagation()}
35 >
36 <Stack gap={'xl'}>
37 {props.note && <Text>{props.note.text}</Text>}
38 <Card withBorder p={'xs'} radius={'lg'}>
39 <Stack>
40 <Group gap={'sm'}>
41 {props.urlCardContent.thumbnailUrl && (
42 <AspectRatio ratio={1 / 1} flex={0.1}>
43 <Image
44 src={props.urlCardContent.thumbnailUrl}
45 alt={`${props.urlCardContent.url} social preview image`}
46 radius={'md'}
47 w={50}
48 h={50}
49 />
50 </AspectRatio>
51 )}
52 <Stack gap={0} flex={0.9}>
53 <Tooltip label={props.urlCardContent.url}>
54 <Anchor
55 component={Link}
56 href={props.urlCardContent.url}
57 target="_blank"
58 c={'gray'}
59 lineClamp={1}
60 >
61 {domain}
62 </Anchor>
63 </Tooltip>
64 {props.urlCardContent.title && (
65 <Text fw={500} lineClamp={1}>
66 {props.urlCardContent.title}
67 </Text>
68 )}
69 </Stack>
70 </Group>
71 </Stack>
72 </Card>
73 </Stack>
74 </Modal>
75 );
76}