diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-07-29 14:52:57 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-07-29 14:52:57 +0700 |
| commit | 1a58c55e6415d78f5d155055071a649d1f56492a (patch) | |
| tree | d133585fdabf70b93d4741795eed9ef5869dda09 /src | |
| parent | aad3092b7c2b293333d894a192c8056f6502c9a0 (diff) | |
<iman> update mobile view
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/LobSectionCategory.jsx | 51 |
1 files changed, 22 insertions, 29 deletions
diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx index 5e9934c3..34a09e46 100644 --- a/src/lib/product/components/LobSectionCategory.jsx +++ b/src/lib/product/components/LobSectionCategory.jsx @@ -29,43 +29,36 @@ const LobSectionCategory = ({ categories }) => { return ( <section> {isDesktop && ( - <div className="group/item grid grid-flow-col gap-y-2 gap-x-2 w-full h-full"> + <div className="group/item grid grid-flow-col gap-y-2 gap-x-4 w-full h-full"> {displayedCategories?.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-36 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-start h-full px-1 flex-row "> - <Image className="h-full w-full" src={category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'} width={56} height={48} quality={100} 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> + <Link + href={createSlug('/shop/category/', category?.name, category?.id)} + key={category?.id} + passHref + className="block hover:scale-105 transition-transform duration-300 bg-cover bg-center h-[144px]" + style={{ + backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`, + }} + > + </Link> ))} </div> )} {isMobile && ( <div className="py-4"> - <Swiper slidesPerView={2.3} spaceBetween={10}> - {displayedCategories.map((category) => ( + <Swiper slidesPerView={1.2} spaceBetween={10}> + {displayedCategories?.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 min-h-16 max-h-16 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?.image1920 ? category?.image1920 : '/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 + href={createSlug('/shop/category/', category?.name, category?.id)} + key={category?.id} + passHref + className="block bg-cover bg-center h-[144px]" + style={{ + backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`, + }} + > </Link> </SwiperSlide> ))} |