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