nandi.uk
This repository has no description
3.7 kB
116 lines
1'use client';
2
3import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
4import UrlCard from '@/features/cards/components/urlCard/UrlCard';
5import useMyCards from '@/features/cards/lib/queries/useMyCards';
6import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
7import { useNavbarContext } from '@/providers/navbar';
8import {
9 Anchor,
10 Button,
11 Divider,
12 Grid,
13 Group,
14 Stack,
15 Text,
16 Title,
17} from '@mantine/core';
18import { Fragment, useState } from 'react';
19import { FaRegNoteSticky } from 'react-icons/fa6';
20import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
21import { FiPlus } from 'react-icons/fi';
22import { LinkButton } from '@/components/link/MantineLink';
23
24export default function RecentCards() {
25 const { desktopOpened } = useNavbarContext();
26 const { settings } = useUserSettings();
27 const [showAddDrawer, setShowAddDrawer] = useState(false);
28 const { data: profile } = useMyProfile();
29 const { data: myCardsData } = useMyCards({ limit: 4 });
30 const cards = myCardsData.pages.flatMap((page) => page.cards) ?? [];
31
32 return (
33 <Stack>
34 <Group justify="space-between">
35 <Group gap="xs">
36 <FaRegNoteSticky size={22} />
37 <Title order={2}>Cards</Title>
38 </Group>
39 <LinkButton
40 variant="light"
41 color="blue"
42 href={`/profile/${profile.handle}/cards`}
43 >
44 View all
45 </LinkButton>
46 </Group>
47
48 {cards.length > 0 ? (
49 <Grid gap={settings.cardView === 'list' ? 0 : 'xs'}>
50 {cards.map((card, index) => (
51 <Fragment key={card.id}>
52 {settings.cardView === 'list' && index > 0 && (
53 <Grid.Col span={12}>
54 <Divider />
55 </Grid.Col>
56 )}
57 <Grid.Col
58 span={{
59 base: 12,
60 xs:
61 settings.cardView !== 'grid' ? 12 : desktopOpened ? 12 : 6,
62 sm: settings.cardView !== 'grid' ? 12 : desktopOpened ? 6 : 4,
63 md: settings.cardView !== 'grid' ? 12 : 4,
64 lg: settings.cardView !== 'grid' ? 12 : 3,
65 }}
66 >
67 <UrlCard
68 id={card.id}
69 url={card.url}
70 uri={card.uri}
71 cardContent={card.cardContent}
72 note={card.note}
73 urlLibraryCount={card.urlLibraryCount}
74 urlIsInLibrary={card.urlInLibrary}
75 urlConnectionCount={card.urlConnectionCount ?? 0}
76 urlIsConnected={card.urlIsConnected}
77 cardAuthor={card.author}
78 viaCardId={card.id}
79 />
80 </Grid.Col>
81 </Fragment>
82 ))}
83 </Grid>
84 ) : (
85 <Fragment>
86 <Stack align="center" gap="xs">
87 <Text fz="h3" fw={600} c="gray">
88 No cards
89 </Text>
90 <Button
91 variant="light"
92 color="gray"
93 size="md"
94 rightSection={<FiPlus size={22} />}
95 onClick={() => setShowAddDrawer(true)}
96 >
97 Add your first card
98 </Button>
99
100 <Text ta={'center'} fw={500} c={'gray'}>
101 Need inspiration?{' '}
102 <Anchor href={'/explore'} fw={500} c={'grape'}>
103 Explore cards from the community
104 </Anchor>
105 </Text>
106 </Stack>
107
108 <AddCardDrawer
109 isOpen={showAddDrawer}
110 onClose={() => setShowAddDrawer(false)}
111 />
112 </Fragment>
113 )}
114 </Stack>
115 );
116}