✨ feat: fresh products

:%s

src/components/common/ImgWithLink/ImgWithLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './ImgWithLink.module.scss'
 import Image from 'next/image'
-import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
+import { BLUR_DATA_IMG, DEFAULT_IMG } from 'src/utils/constanst.utils'
 
 export interface ImgWithLinkProps {
     src: string,
@@ -12,7 +12,7 @@ export interface ImgWithLinkProps {
 const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
     return (
         <div className={s.imgWithLink}>
-            <Image src={src} alt={alt}
+            <Image src={src || DEFAULT_IMG.src} alt={alt}
                 layout="fill"
                 className={s.imgWithLink}
                 placeholder="blur"

src/components/common/ProductCard/ProductCard.tsx

@@ -1,8 +1,8 @@
+import { ProductCard } from '@commerce/types/product'
 import Link from 'next/link'
 import React from 'react'
 import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
-import { ProductProps } from 'src/utils/types.utils'
 import { ImgWithLink } from '..'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
@@ -11,16 +11,18 @@ import LabelCommon from '../LabelCommon/LabelCommon'
 import s from './ProductCard.module.scss'
 import ProductNotSell from './ProductNotSell/ProductNotSell'
 
-export interface ProductCardProps extends ProductProps {
+export interface ProductCardProps extends ProductCard {
   buttonText?: string
   isSingleButton?: boolean,
 }
 
-const ProductCard = ({
+const ProductCardComponent = ({
   category,
   name,
+  slug,
   weight,
   price,
+  currencyCode,
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
@@ -35,24 +37,31 @@ const ProductCard = ({
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
-        <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-          <div className={s.productImage}>
-            <ImgWithLink src={imageSrc} alt={name}/>
-          </div>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a>
+            <div className={s.productImage}>
+              <ImgWithLink src={imageSrc} alt={name}/>
+            </div>
+          </a>
         </Link>
+        {
+          category &&
         <div className={s.productLabel}>
           <LabelCommon shape="half">{category}</LabelCommon>
         </div>
+        }
       </div>
       <div className={s.cardMid}>
         <div className={s.cardMidTop}>
-          <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-            <div className={s.productname}>{name} </div>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.productname}>{name} </div>
+            </a>
           </Link>
           <div className={s.productWeight}>{weight}</div>
         </div>
         <div className={s.cardMidBot}>
-          <div className={s.productPrice}>{price}</div>
+          <div className={s.productPrice}>{price} {currencyCode}</div>
           <div className={s.wishList}>
             <ItemWishList />
           </div>
@@ -80,4 +89,4 @@ const ProductCard = ({
   )
 }
 
-export default ProductCard
+export default ProductCardComponent

src/components/modules/home/FreshProducts/FreshProducts.tsx

@@ -1,99 +1,9 @@
 import { Product } from '@framework/schema'
 import React from 'react'
 import { CollectionCarcousel } from '..'
-import image5 from '../../../../../public/assets/images/image5.png'
-import image6 from '../../../../../public/assets/images/image6.png'
-import image7 from '../../../../../public/assets/images/image7.png'
-import image8 from '../../../../../public/assets/images/image8.png'
 interface FreshProductsProps {
   data: Product[]
 }
-const dataTest = [
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-]
 
 const FreshProducts = ({data}: FreshProductsProps) => {
   return (
@@ -106,41 +16,6 @@ const FreshProducts = ({data}: FreshProductsProps) => {
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
         category={"veggie"}
       />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-2"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-3"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-4"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-5"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-6"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
     </div>
   )
 }

src/utils/constanst.utils.ts

@@ -1,4 +1,7 @@
+import DefaultImg from '../../public/assets/images/default_img.jpg'
+
 export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
+export const DEFAULT_IMG = DefaultImg
 
 export const SOCIAL_LINKS = {
     FB: 'FB',