diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-07-20 11:45:41 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-07-20 11:45:41 +0700 |
| commit | d6b459b3ea396775fae25b44d34c8dc724379224 (patch) | |
| tree | 0cb15bae60b8339fbb9947c14938c758c749cedb /src/lib/product/components/CategorySection.jsx | |
| parent | 911e0fdc6beb2f97c7e390a6aec5773202189d68 (diff) | |
<iman> update mobile view
Diffstat (limited to 'src/lib/product/components/CategorySection.jsx')
| -rw-r--r-- | src/lib/product/components/CategorySection.jsx | 51 |
1 files changed, 38 insertions, 13 deletions
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 4c66e861..278bda94 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,24 +1,49 @@ import Image from "next/image" import Link from 'next/link' import { createSlug } from '@/core/utils/slug' - +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; const CategorySection = ({ categories }) => { + const { isDesktop, isMobile } = useDevice(); return ( <section> - <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 "> - {categories.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='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> + {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) => ( + <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> + </div> </div> </div> - </div> - </Link> - ))} - </div> + </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> + </div> + </Link> + </SwiperSlide> + ))} + </Swiper> + </div> + } </section> ) } |