nandi.uk
This repository has no description
feat: create collection/card button on home
author
pdelfan
date
(Apr 22, 2026, 4:13 PM -0700)
commit
157cc68c
157cc68c8779e62e2812ea1fe331f514b25dda25
parent
38ae1c5b
38ae1c5b5c4a4250c3ca86d256d26fda7e90ff62
+66
-27
+25
-12
src/webapp/features/home/components/recentCards/RecentCards.tsx
+25
-12
src/webapp/features/home/components/recentCards/RecentCards.tsx
···
6
6
import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
7
7
import { useNavbarContext } from '@/providers/navbar';
8
8
import {
9
+
ActionIcon,
9
10
Anchor,
10
11
Button,
11
12
Divider,
···
36
37
<FaRegNoteSticky size={22} />
37
38
<Title order={2}>Cards</Title>
38
39
</Group>
39
-
<LinkButton
40
-
variant="light"
41
-
color="blue"
42
-
href={`/profile/${profile.handle}/cards`}
43
-
>
44
-
View all
45
-
</LinkButton>
40
+
<Group gap="xs">
41
+
<ActionIcon
42
+
variant="light"
43
+
color="blue"
44
+
size={38}
45
+
radius={'xl'}
46
+
onClick={() => setShowAddDrawer(true)}
47
+
aria-label="Add card"
48
+
>
49
+
<FiPlus size={18} />
50
+
</ActionIcon>
51
+
<LinkButton
52
+
variant="light"
53
+
color="blue"
54
+
href={`/profile/${profile.handle}/cards`}
55
+
>
56
+
View all
57
+
</LinkButton>
58
+
</Group>
46
59
</Group>
47
60
48
61
{cards.length > 0 ? (
···
104
117
</Anchor>
105
118
</Text>
106
119
</Stack>
107
-
108
-
<AddCardDrawer
109
-
isOpen={showAddDrawer}
110
-
onClose={() => setShowAddDrawer(false)}
111
-
/>
112
120
</Fragment>
113
121
)}
122
+
123
+
<AddCardDrawer
124
+
isOpen={showAddDrawer}
125
+
onClose={() => setShowAddDrawer(false)}
126
+
/>
114
127
</Stack>
115
128
);
116
129
}
+4
-1
src/webapp/features/home/components/recentCards/Skeleton.RecentCards.tsx
+4
-1
src/webapp/features/home/components/recentCards/Skeleton.RecentCards.tsx
···
10
10
<FaRegNoteSticky size={22} />
11
11
<Title order={2}>Cards</Title>
12
12
</Group>
13
-
<Skeleton w={87} h={36} radius={'xl'} />
13
+
<Group gap="xs">
14
+
<Skeleton w={38} h={38} circle />
15
+
<Skeleton w={87} h={36} radius={'xl'} />
16
+
</Group>
14
17
</Group>
15
18
16
19
<Grid gap="xs">
+33
-13
src/webapp/features/home/components/recentCollections/RecentCollections.tsx
+33
-13
src/webapp/features/home/components/recentCollections/RecentCollections.tsx
···
4
4
import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
5
5
import useMyCollections from '@/features/collections/lib/queries/useMyCollections';
6
6
import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
7
-
import { Stack, Button, Text, SimpleGrid, Group, Title } from '@mantine/core';
7
+
import {
8
+
Stack,
9
+
Button,
10
+
Text,
11
+
SimpleGrid,
12
+
Group,
13
+
Title,
14
+
ActionIcon,
15
+
} from '@mantine/core';
8
16
import { Fragment, useState } from 'react';
9
17
import { BiCollection } from 'react-icons/bi';
10
18
import { FiPlus } from 'react-icons/fi';
···
26
34
<BiCollection size={22} />
27
35
<Title order={2}>Collections</Title>
28
36
</Group>
29
-
<LinkButton
30
-
variant="light"
31
-
color="blue"
32
-
href={`/profile/${profile.handle}/collections`}
33
-
>
34
-
View all
35
-
</LinkButton>
37
+
<Group gap="xs">
38
+
<ActionIcon
39
+
variant="light"
40
+
color="blue"
41
+
size={38}
42
+
radius={'xl'}
43
+
onClick={() => setShowCollectionDrawer(true)}
44
+
aria-label="Create collection"
45
+
>
46
+
<FiPlus size={18} />
47
+
</ActionIcon>
48
+
<LinkButton
49
+
variant="light"
50
+
color="blue"
51
+
href={`/profile/${profile.handle}/collections`}
52
+
>
53
+
View all
54
+
</LinkButton>
55
+
</Group>
36
56
</Group>
37
57
38
58
{collections.length > 0 ? (
···
64
84
Create your first collection
65
85
</Button>
66
86
</Stack>
67
-
68
-
<CreateCollectionDrawer
69
-
isOpen={showCollectionDrawer}
70
-
onClose={() => setShowCollectionDrawer(false)}
71
-
/>
72
87
</Fragment>
73
88
)}
89
+
90
+
<CreateCollectionDrawer
91
+
isOpen={showCollectionDrawer}
92
+
onClose={() => setShowCollectionDrawer(false)}
93
+
/>
74
94
</Stack>
75
95
);
76
96
}
+4
-1
src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
+4
-1
src/webapp/features/home/components/recentCollections/Skeleton.RecentCollections.tsx
···
10
10
<BiCollection size={22} />
11
11
<Title order={2}>Collections</Title>
12
12
</Group>
13
-
<Skeleton w={87} h={36} radius={'xl'} />
13
+
<Group gap="xs">
14
+
<Skeleton w={38} h={38} circle />
15
+
<Skeleton w={87} h={36} radius={'xl'} />
16
+
</Group>
14
17
</Group>
15
18
16
19
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">