nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
cards
/
components
/
cardToBeAddedPreview
/
CardToBeAddedPreview.tsx
3.1 kB
126 lines
1import {
2 AspectRatio,
3 Group,
4 Stack,
5 Image,
6 Text,
7 Card,
8 Anchor,
9 Tooltip,
10 Textarea,
11 Button,
12} from '@mantine/core';
13import Link from 'next/link';
14import { Dispatch, SetStateAction, useState } from 'react';
15import { UrlCard } from '@/api-client';
16import { getDomain } from '@/lib/utils/link';
17
18interface Props {
19 url: string;
20 thumbnailUrl?: string;
21 title?: string;
22 note?: string;
23 onUpdateNote: Dispatch<SetStateAction<string | undefined>>;
24}
25
26export default function CardToBeAddedPreview(props: Props) {
27 const [noteMode, setNoteMode] = useState(false);
28 const [note, setNote] = useState(props.note);
29 const domain = getDomain(props.url);
30
31 if (noteMode) {
32 return (
33 <Card
34 withBorder
35 component="article"
36 p={'xs'}
37 radius={'lg'}
38 style={{ cursor: 'pointer' }}
39 >
40 <Stack gap={'xs'}>
41 <Textarea
42 id="note"
43 label="Your note"
44 placeholder="Add a note about this card"
45 variant="filled"
46 size="md"
47 rows={3}
48 maxLength={500}
49 value={note}
50 onChange={(e) => setNote(e.currentTarget.value)}
51 />
52 <Group gap={'xs'} grow>
53 <Button
54 variant="light"
55 color="gray"
56 onClick={() => {
57 setNoteMode(false);
58 setNote(props.note);
59 }}
60 >
61 Cancel
62 </Button>
63 <Button
64 onClick={() => {
65 props.onUpdateNote(note);
66 setNoteMode(false);
67 }}
68 disabled={note?.trimEnd() === ''}
69 >
70 Save
71 </Button>
72 </Group>
73 </Stack>
74 </Card>
75 );
76 }
77
78 return (
79 <Card withBorder component="article" p={'xs'} radius={'lg'}>
80 <Stack>
81 <Group gap={'sm'} justify="space-between">
82 {props.thumbnailUrl && (
83 <AspectRatio ratio={1 / 1} flex={0.1}>
84 <Image
85 src={props.thumbnailUrl}
86 alt={`${props.url} social preview image`}
87 radius={'md'}
88 w={50}
89 h={50}
90 />
91 </AspectRatio>
92 )}
93 <Stack gap={0} flex={0.9}>
94 <Tooltip label={props.url}>
95 <Anchor
96 component={Link}
97 href={props.url}
98 target="_blank"
99 c={'gray'}
100 lineClamp={1}
101 onClick={(e) => e.stopPropagation()}
102 >
103 {domain}
104 </Anchor>
105 </Tooltip>
106 {props.title && (
107 <Text fw={500} lineClamp={1}>
108 {props.title}
109 </Text>
110 )}
111 </Stack>
112 <Button
113 variant="light"
114 color="gray"
115 onClick={(e) => {
116 e.stopPropagation();
117 setNoteMode(true);
118 }}
119 >
120 {note ? 'Edit note' : 'Add note'}
121 </Button>
122 </Group>
123 </Stack>
124 </Card>
125 );
126}