refactor: move homepage components to its route

Author: pooriaset

src/app/[locale]/(main)/(container)/(homepage)/components/BestSellingProducts.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { GetAllProductsQuery } from '@/graphql/types/graphql';
+import { Card, CardContent, CardHeader, useTheme } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { FC } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation } from 'swiper/modules';
+import { VariableProductItem } from '@/components/VariableProductItem';
+
+export interface BestSellingProductsProps {
+  items?: NonNullable<GetAllProductsQuery['products']>['nodes'];
+}
+const BestSellingProducts: FC<BestSellingProductsProps> = ({ items }) => {
+  const t = useTranslations();
+  const theme = useTheme();
+
+  return (
+    <Card variant="outlined">
+      <CardHeader
+        title={t('header.navigation.bestSelling')}
+        sx={{
+          textAlign: 'center',
+        }}
+      />
+      <CardContent>
+        <Swiper
+          dir={theme.direction}
+          navigation={true}
+          modules={[Autoplay, Navigation]}
+          slidesPerView={1}
+          breakpoints={{
+            [theme.breakpoints.values.xs]: {
+              slidesPerView: 1,
+              spaceBetween: 16,
+            },
+            [theme.breakpoints.values.sm]: {
+              slidesPerView: 2,
+              spaceBetween: 16,
+            },
+            [theme.breakpoints.values.md]: {
+              slidesPerView: 5,
+              spaceBetween: 16,
+            },
+            [theme.breakpoints.values.lg]: {
+              slidesPerView: 6,
+              spaceBetween: 16,
+            },
+          }}
+          spaceBetween={theme.spacing(2)}
+        >
+          {items?.map((product) => {
+            if (product.__typename === 'VariableProduct') {
+              return (
+                <SwiperSlide
+                  key={product.databaseId}
+                  style={{
+                    height: 'auto',
+                    boxSizing: 'border-box',
+                  }}
+                >
+                  <VariableProductItem data={product} />
+                </SwiperSlide>
+              );
+            }
+          })}
+        </Swiper>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BestSellingProducts;

src/components/MainCategories/MainCategories.tsx renamed to src/app/[locale]/(main)/(container)/(homepage)/components/MainCategories.tsx

@@ -4,7 +4,7 @@ import { ChevronLeft } from '@mui/icons-material';
 import { Box, Grid, Link, Stack } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import React, { FC } from 'react';
-import Image from '../common/Image';
+import Image from '../../../../../../components/common/Image';
 
 export interface IMainCategory {
   id: number | string;

src/components/HomePageSlider/HomePageSlider.tsx renamed to src/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/MainSlider.tsx

@@ -8,11 +8,11 @@ import { Autoplay, Navigation, Pagination } from 'swiper/modules';
 import { SliderItem } from './components/SliderItem';
 import { ISliderItem } from './types';
 
-export interface CarouselProps {
+export interface MainSliderProps {
   items?: ISliderItem[];
 }
 
-const MySwiper: FC<CarouselProps> = ({ items }) => {
+const MainSlider: FC<MainSliderProps> = ({ items }) => {
   const theme = useTheme();
   return (
     <Swiper
@@ -43,4 +43,4 @@ const MySwiper: FC<CarouselProps> = ({ items }) => {
   );
 };
 
-export default MySwiper;
+export default MainSlider;

src/components/HomePageSlider/components/SliderItem/SliderItem.tsx renamed to src/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/components/SliderItem/SliderItem.tsx

@@ -0,0 +1 @@
+export { default as MainSlider } from './MainSlider';

src/components/HomePageSlider/components/SliderItem/index.ts renamed to src/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/components/SliderItem/index.ts

@@ -1,7 +1,3 @@
-import BestSellingProducts from '@/components/BestSellingProducts/BestSellingProducts';
-import { HomePageSlider } from '@/components/HomePageSlider';
-import { ISliderItem } from '@/components/HomePageSlider/types';
-import { MainCategories } from '@/components/MainCategories';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_MAIN_CATEGORIES } from '@/graphql/queries/categories';
 import { GET_VARIABLE_PRODUCTS_QUERY } from '@/graphql/queries/products';
@@ -15,9 +11,13 @@ import {
 import { Sleep } from '@/services/common';
 import { bestSellingSortOption } from '@/static/sortOptions';
 import { Grid } from '@mui/material';
+import { MainSlider } from './components/MainSlider';
+import MainCategories from './components/MainCategories';
+import BestSellingProducts from './components/BestSellingProducts';
+import { ISliderItem } from './components/MainSlider/types';
 
 const getSliders = async () => {
-  await Sleep(51111000);
+  await Sleep(2000);
   const { data } = await getClient().query<GetHomePageSlidersQuery>({
     query: GET_HOMEPAGE_SLIDERS,
   });
@@ -79,7 +79,7 @@ export default async function Home() {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12}>
-        <HomePageSlider items={sliders} />
+        <MainSlider items={sliders} />
       </Grid>
       <Grid item xs={12}>
         <MainCategories items={categories} />

src/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/index.ts

@@ -1,6 +1,6 @@
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
-import { ISliderItem } from '@/components/HomePageSlider/types';
+import { ISliderItem } from '@/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/types';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_PUBLISHED_PAGES_LIST } from '@/graphql/queries/pages';
 import { GET_TOP_BANNER } from '@/graphql/queries/sliders';