diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/home/components/CategoryDynamic.jsx | 4 | ||||
| -rw-r--r-- | src/lib/product/components/CategorySection.jsx | 67 |
2 files changed, 50 insertions, 21 deletions
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 244543be..2edd5485 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -19,11 +19,7 @@ const CategoryDynamic = () => { } } loadPromo() - },[]); - - console.log("promoItems",promoItems) - return ( <div> {promoItems && promoItems.map((category) => ( diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 278bda94..e80429f4 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -4,44 +4,77 @@ import { createSlug } from '@/core/utils/slug' import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import { useQuery } from 'react-query' +import { useRouter } from 'next/router' + const CategorySection = ({ categories }) => { const { isDesktop, isMobile } = useDevice(); + const router = useRouter() + + let teks = router.query.slug; + let hasil = teks?.match(/(\d+)$/)[0]; + + const breadcrumbs = useQuery( + `category-breadcrumbs/${hasil}`, + async () => await odooApi('GET', `/api/v1/category/${hasil}/category-breadcrumb`) + ) + return ( <section> - {isDesktop && + {isDesktop && ( <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 "> - {categories.map((category) => ( + {categories.slice(0, 10).map((category) => ( <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={category?.image_1920? category?.image_1920 : '/images/noimage.jpeg'} 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> + <Image className="" src={category?.image_1920 ? category?.image_1920 : '/images/noimage.jpeg'} 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> </div> </div> </Link> ))} </div> - } + )} + {isDesktop && categories.length > 10 && ( + <div className="w-full flex justify-end mt-4"> + <Link className=" flex justify-end mt-4 bg-red-500 text-white px-4 py-2 rounded" href={createSlug('/shop/category/', breadcrumbs.data[0]?.name, breadcrumbs.data[0]?.id)}>Lihat Semua + </Link> + </div> + )} + {isMobile && <div className="py-4"> <Swiper slidesPerView={2.3} spaceBetween={10}> - {categories.map((category) => ( - <SwiperSlide> - <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:bg-red-200 group-hover:border-red-400 rounded relative "> - <div className="flex items-center justify-center h-full px-1 flex-row"> - <Image className="" src={category?.image_1920? category?.image_1920 : '/images/noimage.jpeg'} 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> - </div> + {categories.slice(0, 10).map((category) => ( + <SwiperSlide key={category?.id}> + <Link href={createSlug('/shop/category/', category?.name, 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:bg-red-200 group-hover:border-red-400 rounded relative"> + <div className="flex items-center justify-center h-full px-1 flex-row"> + <Image + src={category?.image_1920 ? category?.image_1920 : '/images/noimage.jpeg'} + 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> - </Link> + </div> + </div> + </Link> </SwiperSlide> - ))} + ))} </Swiper> + {categories.length > 10 && ( + <div className="w-full flex justify-end mt-4"> + <Link className=" flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded" href={createSlug('/shop/category/', breadcrumbs.data[0]?.name, breadcrumbs.data[0]?.id)}>Lihat Semua + </Link> + </div> + )} </div> } </section> |