nandi.uk
This repository has no description
2.8 kB
77 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 { useNavbarContext } from '@/providers/navbar';
8import { Divider, Grid, Group, Stack, Text, Title } from '@mantine/core';
9import { Fragment } from 'react';
10import { MdOutlineEmojiNature } from 'react-icons/md';
11import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
12import { LinkButton } from '@/components/link/MantineLink';
13
14export default function DiscoverOnSemble() {
15 const { desktopOpened } = useNavbarContext();
16 const { settings } = useUserSettings();
17 const { data: profile } = useMyProfile();
18 const { data: myCardsData } = useMyCards({ limit: 8 });
19 const { data: similarCardsData } = useSimilarCards({
20 url:
21 myCardsData.pages[0].cards[0]?.url ??
22 `https://bsky.app/profile/${profile?.handle}`,
23 });
24 const cards = similarCardsData.pages.flatMap((page) => page.urls) ?? [];
25
26 return (
27 <Stack>
28 <Group justify="space-between">
29 <Stack gap={0}>
30 <Group gap="xs">
31 <MdOutlineEmojiNature size={22} />
32 <Title order={2}>Discover on Semble</Title>
33 </Group>
34 <Text fw={500} fz={'lg'}>
35 {`Recommendations based on your ${
36 myCardsData.pages[0].cards.length > 0 ? 'activity' : 'profile'
37 }`}
38 </Text>
39 </Stack>
40 <LinkButton variant="light" color="blue" href={'/explore'}>
41 Explore
42 </LinkButton>
43 </Group>
44
45 {cards.length > 0 ? (
46 <Grid gap={settings.cardView === 'list' ? 0 : 'xs'}>
47 {cards.slice(0, 3).map((item, i) => (
48 <Fragment key={i}>
49 {settings.cardView === 'list' && i > 0 && (
50 <Grid.Col span={12}>
51 <Divider />
52 </Grid.Col>
53 )}
54 <Grid.Col
55 span={{
56 base: 12,
57 xs:
58 settings.cardView !== 'grid' ? 12 : desktopOpened ? 12 : 6,
59 sm: settings.cardView !== 'grid' ? 12 : desktopOpened ? 6 : 4,
60 md: settings.cardView !== 'grid' ? 12 : 4,
61 }}
62 >
63 <SimilarUrlCard urlView={item} />
64 </Grid.Col>
65 </Fragment>
66 ))}
67 </Grid>
68 ) : (
69 <Stack align="center" gap="xs">
70 <Text fz="h3" fw={600} c="gray">
71 No recent activity to show yet
72 </Text>
73 </Stack>
74 )}
75 </Stack>
76 );
77}