All files / src/app HomePage.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import { useQuery } from '@apollo/client/react';
import { Box, Center, Stack, Text, Title } from '@mantine/core';
import { IconClockHour4, IconFlame } from '@tabler/icons-react';
import { useTranslations } from 'next-intl';
import type { RecipeCardData } from '@/components/Recipe/RecipeCard';
import { RecipeCarousel } from '@/components/Recipe/RecipeCarousel';
import { GET_LATEST_RECIPES } from '@/lib/graphql/queries';
import classes from './HomePage.module.css';
import { MOCK_RECENTLY_VIEWED_RECIPES } from './mockRecentlyViewed';
 
const HomePage = () => {
  const translate = useTranslations('sidebar');
  const translateHome = useTranslations('home');
 
  const { data, loading } = useQuery(GET_LATEST_RECIPES, {
    variables: { limit: 10 },
  });
 
  const latestRecipes: RecipeCardData[] =
    (data as { getRecipes?: { recipes: RecipeCardData[] } })?.getRecipes
      ?.recipes ?? [];
 
  return (
    <Stack gap="xl" p="md">
      {/* Section 1: Latest Recipes */}
      <Box component="section" className={classes.section}>
        <Box className={classes.sectionHeader}>
          <Title order={1} size="h3">
            <IconFlame
              size={22}
              style={{
                marginRight: 8,
                verticalAlign: 'middle',
                color: 'var(--mantine-color-pink-6)',
              }}
            />
            {translate('latestRecipes')}
          </Title>
        </Box>
        <RecipeCarousel
          loading={loading}
          recipes={latestRecipes}
          emptyMessage={translateHome('carouselEmpty')}
          withFavorite
        />
      </Box>
 
      {/* Section 2: Recently Viewed (Mock) */}
      <Box component="section" className={classes.section}>
        <Box className={classes.sectionHeader}>
          <Title order={3}>
            <IconClockHour4
              size={22}
              style={{
                marginRight: 8,
                verticalAlign: 'middle',
                color: 'var(--mantine-color-grape-6)',
              }}
            />
            {translateHome('recentlyViewed')}
          </Title>
        </Box>
        <RecipeCarousel
          recipes={MOCK_RECENTLY_VIEWED_RECIPES}
          withFavorite={false}
        />
        <Center mt="xs">
          <Text size="xs" c="dimmed" fs="italic">
            {translateHome('recentlyViewedHint')}
          </Text>
        </Center>
      </Box>
    </Stack>
  );
};
 
export default HomePage;