From 9b669335ca470f364f4d0cad1b0aecce4d7e272c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <tranly237@gmail.com>
Date: Mon, 6 Sep 2021 09:10:02 +0700
Subject: [PATCH] :art: styles: list product with info component

:%s
---
 pages/404.tsx                                 | 21 --------
 pages/demo.tsx                                |  3 +-
 pages/product/[slug].tsx                      |  3 +-
 .../InfoProducts/InfoProducts.module.scss     |  5 ++
 .../InfoProducts/InfoProducts.tsx             | 18 +++++--
 .../ListProductWithInfo.module.scss           | 11 ++++
 .../ListProductWithInfo.tsx                   | 51 +++++++++++++++++++
 .../ViewedProducts/ViewedProducts.tsx         | 15 ++++++
 .../modules/product-detail/index.ts           |  1 +
 9 files changed, 99 insertions(+), 29 deletions(-)
 create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
 create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
 create mode 100644 src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

diff --git a/pages/404.tsx b/pages/404.tsx
index 38a01bcc4..7fb30b9de 100644
--- a/pages/404.tsx
+++ b/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>
diff --git a/pages/demo.tsx b/pages/demo.tsx
index 81714a811..49238c906 100644
--- a/pages/demo.tsx
+++ b/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/>
     </>
 }
 
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index adf1fd8dd..b26de19bb 100644
--- a/pages/product/[slug].tsx
+++ b/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/>
   </>
 }
 
diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
index e69de29bb..9a2f2ceb7 100644
--- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
+++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
@@ -0,0 +1,5 @@
+.infoProducts {
+    .top {
+        
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx
index 30ef3bca8..25e18252c 100644
--- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx
+++ b/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>
-            InfoProducts
-            {title}
+        <div className={s.infoProducts}>
+            <div className={s.top}>
+                <HeadingCommon>{title}</HeadingCommon>
+                <div className={s.sub}>
+                    {subtitle}
+                </div>
+            </div>
+            <ViewAllItem link={ROUTE.PRODUCTS} />
+
         </div>
     );
 };
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
new file mode 100644
index 000000000..55bca8cd5
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
new file mode 100644
index 000000000..5606a6900
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
new file mode 100644
index 000000000..820af402f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts
index 79dd056d0..b1a018d8a 100644
--- a/src/components/modules/product-detail/index.ts
+++ b/src/components/modules/product-detail/index.ts
@@ -1 +1,2 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
+export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'