nandi.uk
This repository has no description
1.6 kB
56 lines
1'use client';
2
3import type { Collection } from '@/api-client';
4import { getRecordKey } from '@/lib/utils/atproto';
5import { getRelativeTime } from '@/lib/utils/time';
6import { Card, Group, Stack, Text } from '@mantine/core';
7import { useRouter } from 'next/navigation';
8
9interface Props {
10 size?: 'large' | 'compact' | 'list' | 'basic';
11 collection: Collection;
12}
13
14export default function CollectionCard(props: Props) {
15 const router = useRouter();
16 const { collection } = props;
17 const rkey = getRecordKey(collection.uri!!);
18 const time = getRelativeTime(collection.updatedAt);
19 const relativeUpdateDate =
20 time === 'just now' ? `Updated ${time}` : `Updated ${time} ago`;
21
22 // TODO: add more sizes
23 return (
24 <Card
25 withBorder
26 onClick={() =>
27 router.push(
28 `/profile/${collection.author.handle}/collections/${rkey}`,
29 )
30 }
31 radius={'lg'}
32 p={'sm'}
33 style={{ cursor: 'pointer' }}
34 >
35 <Stack justify="space-between" h={'100%'}>
36 <Stack gap={0}>
37 <Text fw={500} lineClamp={1}>
38 {collection.name}
39 </Text>
40 {collection.description && (
41 <Text c={'gray'} lineClamp={2}>
42 {collection.description}
43 </Text>
44 )}
45 </Stack>
46 <Group justify="space-between">
47 <Text c={'gray'}>
48 {collection.cardCount}{' '}
49 {collection.cardCount === 1 ? 'card' : 'cards'} ·{' '}
50 {relativeUpdateDate}
51 </Text>
52 </Group>
53 </Stack>
54 </Card>
55 );
56}