🎨 styles: list product with info component

:%s

pages/404.tsx

@@ -1,25 +1,4 @@
-import type { GetStaticPropsContext } from 'next'
-import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
-
-export async function getStaticProps({
-  preview,
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const { pages } = await commerce.getAllPages({ config, preview })
-  const { categories, brands } = await commerce.getSiteInfo({ config, preview })
-  return {
-    props: {
-      pages,
-      categories,
-      brands,
-    },
-    revalidate: 200,
-  }
-}
-
 export default function NotFound() {
   return (
     <div>

pages/demo.tsx

@@ -1,5 +1,5 @@
 import { Layout, RecipeDetail } from 'src/components/common';
-import { ProductInfoDetail } from 'src/components/modules/product-detail';
+import { ProductInfoDetail, ViewedProducts } from 'src/components/modules/product-detail';
 import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
 
 
@@ -8,6 +8,7 @@ export default function Demo() {
     return <>
         <ProductInfoDetail />
         <RecipeDetail ingredients={PRODUCT_DATA_TEST}/>
+        <ViewedProducts/>
     </>
 }
 

pages/product/[slug].tsx

@@ -1,11 +1,10 @@
 
-import { Layout, RecipeDetail } from 'src/components/common'
+import { Layout } from 'src/components/common'
 import { ProductInfoDetail } from 'src/components/modules/product-detail'
 
 export default function Slug() {
   return <>
     <ProductInfoDetail/>
-    <RecipeDetail/>
   </>
 }
 

src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss

@@ -0,0 +1,5 @@
+.infoProducts {
+    .top {
+        
+    }
+}

src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-
+import { ROUTE } from 'src/utils/constanst.utils';
-
+import HeadingCommon from '../../HeadingCommon/HeadingCommon';
+import ViewAllItem from '../../ViewAllItem/ViewAllItem';
+import s from './InfoProducts.module.scss'
 interface Props {
     title: string,
     subtitle?: string,
@@ -8,9 +10,15 @@ interface Props {
 
 const InfoProducts = ({ title, subtitle }: Props) => {
     return (
-        <div>
+        <div className={s.infoProducts}>
-            InfoProducts
+            <div className={s.top}>
-            {title}
+                <HeadingCommon>{title}</HeadingCommon>
+                <div className={s.sub}>
+                    {subtitle}
+                </div>
+            </div>
+            <ViewAllItem link={ROUTE.PRODUCTS} />
+
         </div>
     );
 };

src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss

@@ -0,0 +1,11 @@
+@import '../../../styles/utilities';
+
+.listProductWithInfo {
+    background-color: #F5F4F2;
+    @screen md {
+        @apply flex;
+    }
+    .productsWrap {
+        @apply custom-border-radius-lg;
+    }
+}

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

@@ -0,0 +1,51 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import CarouselCommon from '../CarouselCommon/CarouselCommon';
+import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard';
+import InfoProducts from './InfoProducts/InfoProducts';
+import s from './ListProductWithInfo.module.scss';
+
+interface Props {
+    data: ProductCardProps[],
+    title: string,
+    subtitle?: string,
+}
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 2,
+    mode: 'free',
+    breakpoints: {
+        '(min-width: 640px)': {
+            slidesPerView: 3,
+        },
+        '(min-width: 768px)': {
+            slidesPerView: 3,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 4,
+        },
+        '(min-width: 1280px)': {
+            slidesPerView: 4,
+        },
+    },
+}
+
+const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+    return (
+        <div className={s.listProductWithInfo}>
+            <InfoProducts
+                title={title}
+                subtitle={subtitle}
+            />
+            <div className={s.productsWrap}>
+                <CarouselCommon<ProductCardProps>
+                    data={data}
+                    Component={ProductCard}
+                    itemKey={title}
+                    option={OPTION_DEFAULT}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ListProductWithInfo;

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ViewedProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="viewed Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ViewedProducts;

src/components/modules/product-detail/index.ts

@@ -1 +1,2 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
+export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'