From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 .../product-detail/components/ProductDetail.tsx    | 68 +++++++++++++++-------
 1 file changed, 48 insertions(+), 20 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 08ad7d51..93fa7118 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,28 +2,34 @@ import style from '../styles/product-detail.module.css'
 
 import React, { useEffect } from 'react'
 import Link from 'next/link'
-import { MessageCircleIcon } from 'lucide-react'
+import { useRouter } from 'next/router'
+
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
 
 import { IProductDetail } from '~/types/product'
+import useDevice from '@/core/hooks/useDevice'
+import { whatsappUrl } from '~/libs/whatsappUrl'
 
+import { useProductDetail } from '../stores/useProductDetail'
+
+import { RWebShare } from 'react-web-share'
 import ProductImage from './Image'
 import Information from './Information'
 import AddToWishlist from './AddToWishlist'
 import VariantList from './VariantList'
 import SimilarSide from './SimilarSide'
 import SimilarBottom from './SimilarBottom'
-import useDevice from '@/core/hooks/useDevice'
 import PriceAction from './PriceAction'
-import { whatsappUrl } from '~/libs/whatsappUrl'
-import { useRouter } from 'next/router'
-import { useProductDetail } from '../stores/useProductDetail'
 import ProductPromoSection from '~/modules/product-promo/components/Section'
+import Breadcrumb from './Breadcrumb'
 
 type Props = {
   product: IProductDetail
 }
 
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
 const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice()
   const router = useRouter()
@@ -46,6 +52,9 @@ const ProductDetail = ({ product }: Props) => {
   return (
     <>
       <div className='md:flex md:flex-wrap'>
+        <div className="w-full mb-4 md:mb-6 px-4 md:px-0">
+          <Breadcrumb id={product.id} name={product.name} />
+        </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
           <div className='md:flex md:flex-wrap'>
             <div className="md:w-4/12">
@@ -63,18 +72,39 @@ const ProductDetail = ({ product }: Props) => {
 
               <Information product={product} />
 
-              <div className='h-4' />
+              <div className='h-6' />
+
+              <div className="flex gap-x-5">
+                <Button
+                  as={Link}
+                  href={askAdminUrl}
+                  variant='link'
+                  target='_blank'
+                  colorScheme='gray'
+                  leftIcon={<MessageCircleIcon size={18} />}
+                >
+                  Ask Admin
+                </Button>
+
+                <AddToWishlist />
+
+                <RWebShare
+                  data={{
+                    text: 'Check out this product',
+                    title: `${product.name} - Indoteknik.com`,
+                    url: SELF_HOST + router.asPath
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                  >
+                    Share
+                  </Button>
+                </RWebShare>
+              </div>
 
-              <Button
-                as={Link}
-                href={askAdminUrl}
-                variant='link'
-                target='_blank'
-                colorScheme='red'
-                leftIcon={<MessageCircleIcon size={18} />}
-              >
-                Ask Admin
-              </Button>
             </div>
           </div>
 
@@ -117,9 +147,7 @@ const ProductDetail = ({ product }: Props) => {
           <div className="md:w-3/12">
             <PriceAction product={product} />
 
-            <AddToWishlist />
-
-            <div className='h-8' />
+            <div className='h-6' />
 
             <div className={style['heading']}>
               Produk Serupa
@@ -131,7 +159,7 @@ const ProductDetail = ({ product }: Props) => {
           </div>
         )}
 
-        <div className='md:w-full py-0 md:py-10 px-4 md:px-0'>
+        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
           <div className={style['heading']}>
             Kamu Mungkin Juga Suka
           </div>
-- 
cgit v1.2.3