nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
home
/
components
/
discoverOnSemble
/
Skeleton.DiscoverOnSemble.tsx
1.1 kB
35 lines
1import { Box, Group, Scroller, Stack, Title, Text } from '@mantine/core';
2import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
3import { MdOutlineEmojiNature } from 'react-icons/md';
4import { LinkButton } from '@/components/link/MantineLink';
5
6export default function DiscoverOnSembleSkeleton() {
7 return (
8 <Stack>
9 <Group justify="space-between">
10 <Stack gap={0}>
11 <Group gap="xs">
12 <MdOutlineEmojiNature size={22} />
13 <Title order={2}>Discover on Semble</Title>
14 </Group>
15 <Text fw={500} fz={'lg'}>
16 Recommendations based on your activity
17 </Text>
18 </Stack>
19 <LinkButton variant="light" color="blue" href={'/explore'}>
20 Explore
21 </LinkButton>
22 </Group>
23
24 <Scroller scrollAmount={320}>
25 <Group wrap="nowrap" align="stretch" gap="xs">
26 {Array.from({ length: 6 }).map((_, i) => (
27 <Box key={i} w={300} style={{ flexShrink: 0 }}>
28 <UrlCardSkeleton />
29 </Box>
30 ))}
31 </Group>
32 </Scroller>
33 </Stack>
34 );
35}