- InfoProducts
- {title}
+
+
+
{title}
+
+ {subtitle}
+
+
+
+
);
};
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 (
+
+
+
+
+ data={data}
+ Component={ProductCard}
+ itemKey={title}
+ option={OPTION_DEFAULT}
+ />
+
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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'