nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionCardPreview
/
CollectionCardPreview.tsx
2.0 kB
78 lines
1import {
2 AspectRatio,
3 Card,
4 Center,
5 Group,
6 Text,
7 Image,
8 Box,
9 ScrollAreaAutosize,
10} from '@mantine/core';
11import { useScroller } from '@mantine/hooks';
12import useCollection from '../../lib/queries/useCollection';
13import { useState } from 'react';
14
15interface Props {
16 rkey: string;
17 handle: string;
18}
19
20const CARD_WIDTH = 120;
21
22export default function CollectionCardPreview(props: Props) {
23 const scroller = useScroller();
24 const [imageError, setImageError] = useState(false);
25
26 const { data } = useCollection({
27 rkey: props.rkey,
28 handle: props.handle,
29 limit: 4,
30 });
31
32 const cards = data?.pages.flatMap((col) => col.urlCards) ?? [];
33
34 if (cards.length === 0) return null;
35
36 return (
37 <Box
38 ref={scroller.ref}
39 {...scroller.dragHandlers}
40 style={{
41 overflowX: 'auto',
42 scrollbarWidth: 'none',
43 msOverflowStyle: 'none',
44 }}
45 >
46 <Group gap={'xs'} grow={cards.length > 2} wrap="nowrap">
47 {cards.map((c) => (
48 <Box key={c.id} w={CARD_WIDTH} miw={CARD_WIDTH}>
49 {c.cardContent.imageUrl && !imageError ? (
50 <AspectRatio ratio={16 / 9}>
51 <Image
52 src={c.cardContent.imageUrl}
53 alt={`${c.cardContent.url} social preview image`}
54 radius={'md'}
55 fit="cover"
56 draggable={false}
57 onError={() => setImageError(true)}
58 />
59 </AspectRatio>
60 ) : (
61 <AspectRatio ratio={16 / 9}>
62 <Card p={'xs'} radius={'md'} withBorder>
63 <Center my={'auto'}>
64 <Text fz={8} fw={500} lineClamp={2}>
65 {c.cardContent.title ??
66 c.cardContent.description ??
67 c.cardContent.url}
68 </Text>
69 </Center>
70 </Card>
71 </AspectRatio>
72 )}
73 </Box>
74 ))}
75 </Group>
76 </Box>
77 );
78}