nandi.uk
This repository has no description
4.5 kB
138 lines
1'use client';
2
3import UrlCard from '@/features/cards/components/urlCard/UrlCard';
4import useCards from '@/features/cards/lib/queries/useCards';
5import CollectionCard from '@/features/collections/components/collectionCard/CollectionCard';
6import useCollections from '@/features/collections/lib/queries/useCollections';
7import {
8 Container,
9 Group,
10 SimpleGrid,
11 Stack,
12 Title,
13 Grid,
14} from '@mantine/core';
15import ProfileEmptyTab from '../../components/profileEmptyTab/ProfileEmptyTab';
16import { BiCollection } from 'react-icons/bi';
17import { FaRegNoteSticky } from 'react-icons/fa6';
18import { useNavbarContext } from '@/providers/navbar';
19import { CardSaveSource } from '@/features/analytics/types';
20import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
21import { usePathname } from 'next/navigation';
22import { LinkButton } from '@/components/link/MantineLink';
23
24interface Props {
25 handle: string;
26}
27
28export default function ProfileContainer(props: Props) {
29 const pathname = usePathname();
30 const { data: collectionsData } = useCollections({
31 limit: 4,
32 didOrHandle: props.handle,
33 });
34 const { data: cardsData } = useCards({ limit: 4, didOrHandle: props.handle });
35
36 const collections =
37 collectionsData?.pages.flatMap((page) => page.collections) ?? [];
38
39 const cards = cardsData?.pages.flatMap((page) => page.cards) ?? [];
40
41 const { settings } = useUserSettings();
42 const { desktopOpened } = useNavbarContext();
43
44 return (
45 <Container p={'xs'} size={'xl'}>
46 <Stack>
47 <Stack gap={50}>
48 {/* Cards */}
49 <Stack>
50 <Group justify="space-between">
51 <Title order={2} fz={'h3'}>
52 Cards
53 </Title>
54 <LinkButton
55 variant="light"
56 color="blue"
57 href={`/profile/${props.handle}/cards`}
58 >
59 View all
60 </LinkButton>
61 </Group>
62
63 {cards.length > 0 ? (
64 <Grid gap="xs">
65 {cards.map((card) => (
66 <Grid.Col
67 key={card.id}
68 span={{
69 base: 12,
70 xs: desktopOpened ? 12 : 6,
71 sm: desktopOpened ? 6 : 4,
72 md: 4,
73 lg: 3,
74 }}
75 >
76 <UrlCard
77 id={card.id}
78 url={card.url}
79 uri={card.uri}
80 cardAuthor={card.author}
81 cardContent={card.cardContent}
82 note={card.note}
83 authorHandle={props.handle}
84 urlLibraryCount={card.urlLibraryCount}
85 urlIsInLibrary={card.urlInLibrary}
86 urlConnectionCount={card.urlConnectionCount ?? 0}
87 urlIsConnected={card.urlIsConnected}
88 viaCardId={card.id}
89 analyticsContext={{
90 saveSource: CardSaveSource.PROFILE,
91 pagePath: pathname,
92 }}
93 />
94 </Grid.Col>
95 ))}
96 </Grid>
97 ) : (
98 <ProfileEmptyTab message="No cards" icon={FaRegNoteSticky} />
99 )}
100 </Stack>
101
102 {/* Collections */}
103 <Stack>
104 <Group justify="space-between">
105 <Title order={2} fz={'h3'}>
106 Collections
107 </Title>
108 <LinkButton
109 variant="light"
110 color="blue"
111 href={`/profile/${props.handle}/collections`}
112 >
113 View all
114 </LinkButton>
115 </Group>
116
117 {collections.length > 0 ? (
118 <SimpleGrid
119 cols={
120 settings.collectionView !== 'grid'
121 ? { base: 1 }
122 : { base: 1, sm: 2, lg: 4 }
123 }
124 spacing="xs"
125 >
126 {collections.map((collection) => (
127 <CollectionCard key={collection.id} collection={collection} />
128 ))}
129 </SimpleGrid>
130 ) : (
131 <ProfileEmptyTab message="No collections" icon={BiCollection} />
132 )}
133 </Stack>
134 </Stack>
135 </Stack>
136 </Container>
137 );
138}