nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
cards
/
components
/
urlCardContent
/
SembleCollectionCardContent.tsx
2.0 kB
65 lines
1'use client';
2
3import CollectionCardPreview from '@/features/collections/components/collectionCardPreview/CollectionCardPreview';
4import CollectionCardPreviewSkeleton from '@/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview';
5import useCollection from '@/features/collections/lib/queries/useCollection';
6import { Group, Stack, Text } from '@mantine/core';
7import { CollectionAccessType } from '@semble/types';
8import { Suspense } from 'react';
9import { LinkAvatar } from '@/components/link/MantineLink';
10
11interface Props {
12 rkey: string;
13 handle: string;
14}
15
16export default function SembleCollectionCardContent(props: Props) {
17 const { data } = useCollection({
18 rkey: props.rkey,
19 handle: props.handle,
20 });
21
22 const collection = data.pages[0];
23 const accessType = collection.accessType;
24
25 return (
26 <Stack gap={'xs'}>
27 <Stack gap={0}>
28 <Group justify="space-between" wrap="nowrap">
29 <Group gap={4}>
30 {collection.name && (
31 <Text
32 fw={500}
33 lineClamp={1}
34 c={
35 accessType === CollectionAccessType.OPEN ? 'green' : 'bright'
36 }
37 >
38 {collection.name}
39 </Text>
40 )}
41 </Group>
42
43 <LinkAvatar
44 href={`/profile/${collection.author.handle}`}
45 src={collection.author.avatarUrl?.replace(
46 'avatar',
47 'avatar_thumbnail',
48 )}
49 alt={`${collection.author.handle}'s avatar`}
50 size={'sm'}
51 />
52 </Group>
53 {collection.description && (
54 <Text c={'gray'} fz={'sm'} lineClamp={3}>
55 {collection.description}
56 </Text>
57 )}
58 </Stack>
59
60 <Suspense fallback={<CollectionCardPreviewSkeleton />}>
61 <CollectionCardPreview rkey={props.rkey} handle={props.handle} />
62 </Suspense>
63 </Stack>
64 );
65}