A social knowledge tool for researchers built on ATProto
cosmik.network
1import { User } from '@/api-client/ApiClient';
2import { Avatar, Card, Group, Spoiler, Stack, Text } from '@mantine/core';
3import { getRelativeTime } from '@/lib/utils/time';
4import Link from 'next/link';
5
6interface Props {
7 id: string;
8 note: string;
9 createdAt: string;
10 author: User;
11}
12
13export default function NoteCard(props: Props) {
14 const time = getRelativeTime(props.createdAt);
15 const relativeCreateDate = time === 'just now' ? `${time}` : `${time} ago`;
16
17 return (
18 <Card p={'sm'} radius={'lg'} h={'100%'} withBorder>
19 <Stack justify="space-between" h={'100%'}>
20 <Spoiler showLabel={'Read more'} hideLabel={'See less'} maxHeight={200}>
21 <Text fs={'italic'}>{props.note}</Text>
22 </Spoiler>
23
24 <Group gap={'xs'}>
25 <Avatar
26 component={Link}
27 href={`/profile/${props.author.handle}`}
28 src={props.author.avatarUrl}
29 alt={`${props.author.handle}'s avatar`}
30 size={'sm'}
31 />
32
33 <Text>
34 <Text
35 component={Link}
36 href={`/profile/${props.author.handle}`}
37 c={'var(--mantine-color-bright)'}
38 fw={500}
39 span
40 >
41 {props.author.name}
42 </Text>
43 <Text c={'gray'} span>
44 {' · '}
45 </Text>
46 <Text c={'gray'} span>
47 {relativeCreateDate}{' '}
48 </Text>
49 </Text>
50 </Group>
51 </Stack>
52 </Card>
53 );
54}