🎨 styles: list product with info component

:%s

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>
-            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>
     );
 };

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'