nandi.uk
This repository has no description
2.1 kB
64 lines
1'use client';
2
3import useMyCards from '@/features/cards/lib/queries/useMyCards';
4import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
5import SimilarUrlCard from '@/features/semble/components/similarUrlCard/SimilarUrlCard';
6import useSimilarCards from '@/features/semble/lib/queries/useSimilarCards';
7import { Box, Group, Scroller, Stack, Text, Title } from '@mantine/core';
8import { MdOutlineEmojiNature } from 'react-icons/md';
9import { LinkButton } from '@/components/link/MantineLink';
10
11export default function DiscoverOnSemble() {
12 const { data: profile } = useMyProfile();
13 const { data: myCardsData } = useMyCards({ limit: 8 });
14 const { data: similarCardsData } = useSimilarCards({
15 url:
16 myCardsData.pages[0].cards[0]?.url ??
17 `https://bsky.app/profile/${profile?.handle}`,
18 limit: 6,
19 });
20 const cards = similarCardsData.pages.flatMap((page) => page.urls) ?? [];
21
22 return (
23 <Stack>
24 <Group justify="space-between">
25 <Stack gap={0}>
26 <Group gap="xs">
27 <MdOutlineEmojiNature size={22} />
28 <Title order={2}>Discover on Semble</Title>
29 </Group>
30 <Text fw={500} fz={'lg'}>
31 {`Recommendations based on your ${
32 myCardsData.pages[0].cards.length > 0 ? 'activity' : 'profile'
33 }`}
34 </Text>
35 </Stack>
36 <LinkButton variant="light" color="blue" href={'/explore'}>
37 Explore
38 </LinkButton>
39 </Group>
40
41 {cards.length > 0 ? (
42 <Scroller scrollAmount={320}>
43 <Group wrap="nowrap" align="stretch" gap="xs">
44 {cards.slice(0, 10).map((item, i) => (
45 <Box
46 key={i}
47 w={300}
48 style={{ flexShrink: 0, whiteSpace: 'normal' }}
49 >
50 <SimilarUrlCard urlView={item} />
51 </Box>
52 ))}
53 </Group>
54 </Scroller>
55 ) : (
56 <Stack align="center" gap="xs">
57 <Text fz="h3" fw={600} c="gray">
58 No recent activity to show yet
59 </Text>
60 </Stack>
61 )}
62 </Stack>
63 );
64}