Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into fixbug-13/9/2021-datnguyen

pages/test.tsx

@@ -1,59 +1,83 @@
-import { CarouselCommon, ProductCard, Layout } from 'src/components/common'
+import {
+  FeaturedProductCard,
+  Layout
+} from 'src/components/common';
 // import { RecipeListPage } from 'src/components/modules/recipes';
-import { useModalCommon } from 'src/components/hooks'
-import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'
-import { useKeenSlider } from 'keen-slider/react'
-import { CSSProperties } from 'react'
-import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
-import ColectionCarcousel from 'src/components/modules/home/CollectionCarcousel/CollectionCarcousel'
-import { HomeCollection } from 'src/components/modules/home'
-export default function Test() {
-  const {
-    visible: visibleMenuFilter,
-    openModal,
-    closeModal: closeMenuFilter,
-  } = useModalCommon({ initialValue: false })
-  const toggle = () => {
-    if (visibleMenuFilter) {
-      closeMenuFilter()
-    } else {
-      openModal()
-    }
-  }
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
 
-  const style: CSSProperties = {
-    background: 'gray',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '50px',
-    color: '#fff',
-    fontWeight: 500,
-    height: '300px',
-    maxHeight: '100vh',
+const CATEGORY = [
+  {
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+  },
+  {
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+  },
+]
+const BRAND = [
+  {
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Cholimes',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  }]
+
+const FEATURED = [
+
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
   }
-  const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 })
-  const RESPONSIVE = {
-    desktop: {
-      breakpoint: { max: 3000, min: 1024 },
-      items: 5.5,
-      slidesToSlide: 1 // optional, default to 1.
-    },
-    tablet: {
-      breakpoint: { max: 1024, min: 464 },
-      items: 2,
-      slidesToSlide: 1 // optional, default to 1.
-    },
-    mobile: {
-      breakpoint: { max: 464, min: 0 },
-      items: 1,
-      slidesToSlide: 1 // optional, default to 1.
-    }
-  };
+];
+
+
+
+const data = PRODUCT_DATA_TEST[0]
+export default function Test() {
   return (
     <>
-      <HomeCollection />
-      {/* <CarouselCommon<ProductCardProps> showDots={true} draggable={true} infinite={true} data={PRODUCT_DATA_TEST} Component={ProductCard} responsive={RESPONSIVE} itemKey="tets"/> */}
+      <FeaturedProductCard
+        imageSrc={data.imageSrc}
+        title="Sale 25% coffee bean"
+        subTitle="50 first orders within a day"
+        price={data.price}
+        originPrice="$20.00" />
     </>
   )
 }