diff options
Diffstat (limited to 'src/lib/product/components')
7 files changed, 199 insertions, 261 deletions
diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx index 33da703a..e5296f96 100644 --- a/src/lib/product/components/Product/ColumnsSLA.jsx +++ b/src/lib/product/components/Product/ColumnsSLA.jsx @@ -1,8 +1,9 @@ import odooApi from '@/core/api/odooApi' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' -import { Button, Spinner } from 'flowbite-react' -import { memo, useEffect, useState } from 'react' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' +import { memo } from 'react' import { useQuery } from 'react-query' const ColumnSLA = ({ variant, product }) => { @@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => { return ( <> <td> - {dataSLA.isFetching ? ( - <div className='text-center'> - <Spinner aria-label='Center-aligned spinner example' /> - </div> - ) : dataSLA?.data?.qty > 0 ? ( - dataSLA?.data?.qty - ) : ( - <a - href={whatsappUrl('product', { - name: variant.name, - manufacture: product.manufacture?.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 font-medium' - target='_blank' - rel='noreferrer noopener' - > - Tanya Admin - </a> - )} + <Skeleton isLoaded={!dataSLA.isFetching} w='full'> + {dataSLA?.data?.qty > 0 ? ( + dataSLA?.data?.qty + ) : ( + <a + href={whatsappUrl('product', { + name: variant.name, + manufacture: product.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 font-medium' + target='_blank' + rel='noreferrer noopener' + > + Tanya Admin + </a> + )} + </Skeleton> </td> + <td className='flex justify-center'> - {dataSLA.isFetching ? ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> - ) : dataSLA?.data?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${ - dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - dataSLA?.data?.slaDate === 'indent' ? 'text-white' : '' - }`} - > + <Skeleton isLoaded={!dataSLA.isFetching} w='75%'> + <Tooltip placement='top' label={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}> + <Box className='border border-gray_r-7 rounded-md p-2 flex justify-center items-center gap-x-2'> {dataSLA?.data?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`} - > - <path - d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </button> - ) : ( - '-' - )} + <Info size={16} /> + </Box> + </Tooltip> + </Skeleton> </td> </> ) diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 6da289bc..5cc35df7 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -15,7 +15,6 @@ import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' @@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) - const {setRefreshCart , refreshCart} = useProductCartContext() + const { setRefreshCart, refreshCart } = useProductCartContext() const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1> <div className='mt-10'> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div> - <div className='w-3/4'>SKU-{product.id}</div> + <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div> + <div className='w-8/12'>SKU-{product.id}</div> </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Part Number</div> - <div className='w-3/4'>{product.code || '-'}</div> + <div className='w-4/12 text-gray_r-12/70'>Part Number</div> + <div className='w-8/12'>{product.code || '-'}</div> </div> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Manufacture</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Manufacture</div> + <div className='w-8/12'> {product.manufacture?.name ? ( <Link href={createSlug( @@ -282,9 +283,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </div> </div> <div className='flex p-3 items-center bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div> - <div className='w-3/4'> - {product.variants.length > 1 ? ( + <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div> + <div className='w-8/12'> + {product.variants.length > 1 && ( <button type='button' onClick={goToVariantSection} @@ -292,62 +293,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { > <span className='text-red-600 text-sm'>Lihat Selengkapnya</span> </button> - ) : product.variants[0].sla ? ( - product.variants[0].sla?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${product.variants[0].sla?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${ - product.variants[0].sla?.slaDate === 'indent' - ? 'bg-indigo-900' - : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : '' - }`} + )} + + {product.variants.length === 1 && ( + <> + {!product.variants[0]?.sla && <Skeleton width='20%' height='16px' />} + {product.variants[0]?.sla && ( + <Tooltip + placement='top' + label={`Masa Persiapan Barang ${product.variants[0]?.sla?.slaDate}`} > - {product.variants[0].sla?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 ${ - product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : '' - }`} - > - <path - d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </button> - ) : ( - '-' - ) - ) : ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> + <Box className='w-fit flex items-center gap-x-2'> + {product.variants[0]?.sla?.slaDate} + <Info size={16} /> + </Box> + </Tooltip> + )} + </> )} </div> </div> + {product.variants.length === 1 && ( <div className='flex p-3 '> - <div className='w-1/4 text-gray_r-12/70'>Stock</div> - <div className='w-3/4'> - {isLoadingSLA && ( - <div className=''> - <Spinner aria-label='Center-aligned spinner example' /> - </div> - )} + <div className='w-4/12 text-gray_r-12/70'>Stock</div> + <div className='w-8/12'> + {!product.variants[0]?.sla && <Skeleton width='10%' height='16px' />} {product?.variants[0].sla?.qty > 0 && ( <span>{product?.variants[0].sla?.qty}</span> )} @@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </div> </div> )} + <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}> - <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div> + <div className='w-8/12'> {product?.weight > 0 && <span>{product?.weight} KG</span>} {product?.weight == 0 && ( <a diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 3ed68ba3..d64e70c2 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -16,8 +16,9 @@ import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import useAuth from '@/core/hooks/useAuth' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => { const router = useRouter() @@ -149,16 +150,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1> <div className='mt-10'> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div> - <div className='w-3/4'>SKU-{product.id}</div> + <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div> + <div className='w-8/12'>SKU-{product.id}</div> </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Part Number</div> - <div className='w-3/4'>{product.code || '-'}</div> + <div className='w-4/12 text-gray_r-12/70'>Part Number</div> + <div className='w-8/12'>{product.code || '-'}</div> </div> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Manufacture</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Manufacture</div> + <div className='w-8/12'> {product.manufacture?.name ? ( <Link href={createSlug( @@ -174,62 +175,29 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) )} </div> </div> + <div className='flex p-3 items-center bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div> - <div className='w-3/4'> - {product.sla ? ( - product.sla?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${product.sla?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${ - product.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - product.sla?.slaDate === 'indent' ? 'text-white' : '' - }`} - > - {product.sla?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 ${ - product.sla?.slaDate === 'indent' ? 'text-white' : '' - }`} - > - <path - d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </button> - ) : ( - '-' - ) - ) : ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> + <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div> + <div className='w-8/12'> + {!product?.sla && <Skeleton width='20%' height='16px' />} + {product?.sla && ( + <Tooltip + placement='top' + label={`Masa Persiapan Barang ${product?.sla?.slaDate}`} + > + <Box className='w-fit flex items-center gap-x-2'> + {product?.sla?.slaDate} + <Info size={16} /> + </Box> + </Tooltip> )} </div> </div> + <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Stock</div> - <div className='w-3/4'> - {isLoadingSLA && ( - <div className=''> - <Spinner aria-label='Center-aligned spinner example' /> - </div> - )} + <div className='w-4/12 text-gray_r-12/70'>Stock</div> + <div className='w-8/12'> + {!product?.sla && <Skeleton width='10%' height='16px' />} {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>} {product?.sla?.qty == 0 && ( <a @@ -245,8 +213,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) </div> </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div> + <div className='w-8/12'> {product?.weight > 0 && <span>{product?.weight} KG</span>} {product?.weight == 0 && ( <a diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 6b0b27a5..12c43727 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -17,7 +17,6 @@ import whatsappUrl from '@/core/utils/whatsappUrl' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index e0ba90c3..d0c209cc 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -16,7 +16,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import whatsappUrl from '@/core/utils/whatsappUrl' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' +import { Skeleton } from '@chakra-ui/react' const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -89,7 +89,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { quantity, programLineId: null, selected: true, - source : 'buy' + source: 'buy' }) router.push(`/shop/checkout?source=buy`) } @@ -230,10 +230,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { <SpecificationContent label='Ketersediaan'> <span> {isLoadingSLA ? ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> + <Skeleton width='100px' height='full' /> ) : product?.sla?.slaDate != '-' ? ( <button type='button' @@ -267,7 +264,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { </svg> </div> </button> - ): ( + ) : ( '-' )} </span> diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index ce6c12ed..b64349c7 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -2,7 +2,21 @@ import { useRouter } from 'next/router' import { useState } from 'react' import _ from 'lodash' import { toQuery } from 'lodash-contrib' -import { Accordion, Checkbox, Label, TextInput } from 'flowbite-react' +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Button, + Checkbox, + Input, + InputGroup, + InputLeftAddon, + Stack, + VStack +} from '@chakra-ui/react' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { const router = useRouter() @@ -13,7 +27,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu const [priceFrom, setPriceFrom] = useState(query?.priceFrom) const [priceTo, setPriceTo] = useState(query?.priceTo) - const handleCategorysChange = (event) => { + const handleCategoriesChange = (event) => { const value = event.target.value const isChecked = event.target.checked if (isChecked) { @@ -48,80 +62,95 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu return ( <> - <Accordion flush={true} alwaysOpen={true}> - <Accordion.Panel> - <Accordion.Title>Kategori</Accordion.Title> - <Accordion.Content className='overflow-auto max-h-[200px]'> - <div className='flex flex-col gap-4 scroll-snap' id='checkbox'> + <Accordion defaultIndex={[0]} allowMultiple> + <AccordionItem> + <AccordionButton padding={[2, 4]}> + <Box as='span' flex='1' textAlign='left' fontWeight='semibold'> + Brand + </Box> + <AccordionIcon /> + </AccordionButton> + + <AccordionPanel> + <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'> + {brands.map((brand, index) => ( + <div className='flex items-center gap-2' key={index}> + <Checkbox + isChecked={brandValues.includes(brand)} + onChange={handleBrandsChange} + value={brand} + size='md' + > + {brand} + </Checkbox> + </div> + ))} + </Stack> + </AccordionPanel> + </AccordionItem> + + <AccordionItem> + <AccordionButton padding={[2, 4]}> + <Box as='span' flex='1' textAlign='left' fontWeight='semibold'> + Kategori + </Box> + <AccordionIcon /> + </AccordionButton> + + <AccordionPanel> + <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'> {categories.map((category, index) => ( <div className='flex items-center gap-2' key={index}> <Checkbox - id={`categoryOption${index}`} - checked={categoryValues.includes(category)} - onChange={handleCategorysChange} + isChecked={categoryValues.includes(category)} + onChange={handleCategoriesChange} value={category} - /> - <Label htmlFor={`categoryOption${index}`} className='dark:text-gray_r-12/80'> + size='md' + > {category} - </Label> + </Checkbox> </div> ))} - </div> - </Accordion.Content> - </Accordion.Panel> - <Accordion.Panel> - {!defaultBrand && ( - <> - <Accordion.Title>Brand</Accordion.Title> - <Accordion.Content className='overflow-auto max-h-[200px]'> - <div className='flex flex-col gap-4 scroll-snap' id='checkbox'> - {brands.map((brand, index) => ( - <div className='flex items-center gap-2' key={index}> - <Checkbox - id={`brandOption${index}`} - checked={brandValues.includes(brand)} - onChange={handleBrandsChange} - value={brand} - /> - <Label htmlFor={`brandOption${index}`} className='dark:text-gray_r-12/80'> - {brand} - </Label> - </div> - ))} - </div> - </Accordion.Content> - </> - )} - </Accordion.Panel> - <Accordion.Panel> - <Accordion.Title>Harga</Accordion.Title> - <Accordion.Content> - <div className='mb-3'> - <TextInput - placeholder='Harga Minimum' - addon='Rp' - type='number' - value={priceFrom} - onChange={(e) => setPriceFrom(e.target.value)} - /> - </div> - <div className='mb-3'> - <TextInput - placeholder='Harga Maximum' - addon='Rp' - type='number' - value={priceTo} - onChange={(e) => setPriceTo(e.target.value)} - /> - </div> - </Accordion.Content> - </Accordion.Panel> + </Stack> + </AccordionPanel> + </AccordionItem> + + <AccordionItem> + <AccordionButton padding={[2, 4]}> + <Box as='span' flex='1' textAlign='left' fontWeight='semibold'> + Harga + </Box> + <AccordionIcon /> + </AccordionButton> + + <AccordionPanel paddingY={4}> + <VStack gap={4}> + <InputGroup> + <InputLeftAddon>Rp</InputLeftAddon> + <Input + type='number' + placeholder='Harga minimum' + value={priceFrom} + onChange={(e) => setPriceFrom(e.target.value)} + /> + </InputGroup> + <InputGroup> + <InputLeftAddon>Rp</InputLeftAddon> + <Input + type='number' + placeholder='Harga maximum' + value={priceTo} + onChange={(e) => setPriceTo(e.target.value)} + /> + </InputGroup> + </VStack> + </AccordionPanel> + </AccordionItem> </Accordion> - <div className='p-5'> - <button type='button' className='btn-solid-red w-full mt-6' onClick={handleSubmit}> - Terapkan - </button> - </div> + + <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}> + Terapkan + </Button> </> ) } diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ae9618d2..df9aa91b 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -39,9 +39,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { const oddIndexSuggestions = response.data.spellcheck.suggestions.filter( (_, index) => index % 2 === 1 ) + const oddIndexCollations = response.data.spellcheck.collations.filter( (_, index) => index % 2 === 1 ) + const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => { oddIndexCollations.forEach((collation) => { acc.push(collation.collationQuery) @@ -52,7 +54,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { return acc }, []) - setQ(dataSpellings[0]) + if (dataSpellings.length > 0) { + setQ(dataSpellings[0]) + } setSpellings(dataSpellings) }) @@ -183,7 +187,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { defaultBrand={defaultBrand} /> </div> - <div className='w-9/12 p-3'> + <div className='w-9/12 pl-6'> <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1> <div className='flex justify-between items-center mb-2'> <div className='mb-2 leading-6 text-gray_r-11'> |