diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-07-05 10:06:49 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-07-05 10:06:49 +0700 |
| commit | 1a70984f3497652b8d8b64d16053c1f2be452bd7 (patch) | |
| tree | 1acc978f2bc530d30fa2272f9613d464a8da80b9 /src/lib/home/components | |
| parent | 6c79d14a11c8dba20778c0559230a406cd147cc7 (diff) | |
<iman> update category management
Diffstat (limited to 'src/lib/home/components')
| -rw-r--r-- | src/lib/home/components/CategoryPilihan.jsx | 34 |
1 files changed, 29 insertions, 5 deletions
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 3f1066e2..4a1106b0 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -2,17 +2,41 @@ import Image from 'next/image' import useCategoryHome from '../hooks/useCategoryHome' import Link from '@/core/components/elements/Link/Link' import { createSlug } from '@/core/utils/slug' +import { useEffect, useState } from 'react'; +import { bannerApi } from '../../../api/bannerApi'; +const { useQuery } = require('react-query') +import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; + const CategoryPilihan = ({ id, categories }) => { - const { categoryHome } = useCategoryHome({ id }) - console.log("id",id) - console.log("categories",categories) - return ( - <section> + const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'index-a-1' })); + + return ( + <section> <div className='flex flex-row items-center mb-4'> <div className='font-semibold sm:text-h-lg mr-2'>Kategori Pilihan</div> <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> </div> + <div className='flex w-full h-48 bg-red-300 mb-4'> + {heroBanner.data && + heroBanner.data?.length > 0 && ( + <div className='px-4 sm:px-0 object-fill '> + {/* {heroBanner.data?.map((banner) => ( */} + <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> + <Image + width={439} + height={150} + quality={100} + src={heroBanner.data[0].image} + alt={heroBanner.data[0].name} + className='h-48 object-fill w-full rounded hover:scale-105 transition duration-500 ease-in-out' + /> + </Link> + {/* ))} */} + </div> + + )} + </div> <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 "> {categories.map((category) => ( <div className="KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group"> |