nandi.uk
This repository has no description
2.0 kB
69 lines
1'use client';
2
3import type { Collection } from '@/api-client';
4import { getRecordKey } from '@/lib/utils/atproto';
5import { getRelativeTime } from '@/lib/utils/time';
6import { Avatar, Card, Group, Stack, Text } from '@mantine/core';
7import styles from './CollectionCard.module.css';
8import { useRouter } from 'next/navigation';
9
10interface Props {
11 size?: 'large' | 'compact' | 'list' | 'basic';
12 showAuthor?: boolean;
13 collection: Collection;
14}
15
16export default function CollectionCard(props: Props) {
17 const router = useRouter();
18 const { collection } = props;
19 const rkey = getRecordKey(collection.uri!!);
20 const time = getRelativeTime(collection.updatedAt);
21 const relativeUpdateDate =
22 time === 'just now' ? `Updated ${time}` : `Updated ${time} ago`;
23
24 // TODO: add more sizes
25 return (
26 <Card
27 withBorder
28 onClick={() =>
29 router.push(`/profile/${collection.author.handle}/collections/${rkey}`)
30 }
31 radius={'lg'}
32 p={'sm'}
33 className={styles.root}
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 {props.showAuthor && (
54 <Group gap={'xs'}>
55 <Avatar
56 src={collection.author.avatarUrl}
57 alt={`${collection.author.handle}'s avatar`}
58 size={'sm'}
59 />
60
61 <Text c={'dark'} fw={500} span>
62 {collection.author.name}
63 </Text>
64 </Group>
65 )}
66 </Stack>
67 </Card>
68 );
69}