diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/home/components/CategoryPilihan.jsx | 34 | ||||
| -rw-r--r-- | src/lib/product/components/CategorySection.jsx | 22 |
2 files changed, 40 insertions, 16 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"> diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index c250efeb..4c66e861 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,26 +1,26 @@ import Image from "next/image" -import Link from '@/core/components/elements/Link/Link' +import Link from 'next/link' import { createSlug } from '@/core/utils/slug' const CategorySection = ({ categories }) => { return ( <section> - <div className="group/item grid grid-cols-5 gap-y-2 w-full h-full col-span-2 "> + <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 "> {categories.map((category) => ( - <div className="KartuInti h-24 w-26 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group"> - <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '> - <div className="group/edit flex items-center justify-center h-48 w-60 flex-row group-hover/item:visible"> - <div className=' h-36'> - <Image className="group-hover:scale-110 duration-300" src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={36} height={26} alt={category?.name} /> + <Link href={createSlug('/shop/category/', category?.name, category?.id)} key={category?.id} passHref> + <div className="group transition-colors duration-300"> + <div className="KartuInti h-18 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:border-red-400 rounded relative "> + <div className="flex items-center justify-center h-full px-1 flex-row"> + <Image className="" src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={56} height={48} alt={category?.name} /> + <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">{category?.name}</h2> </div> - <h2 className="text-gray-700 content-center text-wrap h-12 border-t-[1px] w-60 px-1 border-gray-200 font-normal text-sm text-center">{category?.name}</h2> </div> </div> - </div> + </Link> ))} - </div> + </div> </section> ) } -export default CategorySection
\ No newline at end of file +export default CategorySection |