summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/brand/components/BrandCard.jsx2
-rw-r--r--src/lib/flashSale/components/FlashSale.jsx2
-rw-r--r--src/lib/home/components/BannerSection.jsx1
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx178
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx2
-rw-r--r--src/lib/home/components/PromotionProgram.jsx59
-rw-r--r--src/lib/home/components/ServiceList.jsx4
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx1
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx1
-rw-r--r--src/lib/product/components/ProductCard.jsx26
-rw-r--r--src/lib/product/components/ProductSlider.jsx2
11 files changed, 152 insertions, 126 deletions
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..dff61b24 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -11,6 +11,7 @@ const BrandCard = ({ brand }) => {
className={`py-1 px-2 border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
isMobile ? 'h-16' : 'h-24'
}`}
+ aria-label={brand.name}
>
{brand.logo && (
<NextImage
@@ -20,6 +21,7 @@ const BrandCard = ({ brand }) => {
height={500}
quality={85}
className='h-full w-[122px] object-contain object-center'
+ loading='eager'
/>
)}
{!brand.logo && (
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 6d90cad7..f4be279e 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -47,6 +47,7 @@ const FlashSale = () => {
width={1080}
height={192}
className='w-full rounded mb-4 hidden sm:block'
+ loading='eager'
/>
<Image
src={flashSale.bannerMobile}
@@ -54,6 +55,7 @@ const FlashSale = () => {
width={256}
height={48}
className='w-full rounded mb-4 block sm:hidden'
+ loading='eager'
/>
<FlashSaleProduct
flashSaleId={flashSale.pricelistId}
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 303b5c4b..898f1bf5 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -51,6 +51,7 @@ const BannerSection = () => {
src={banner.image}
alt={banner.name}
className='h-auto w-full rounded'
+ loading='eager'
/>
</Link>
))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index cc4f42b7..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -9,6 +9,7 @@ import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
const CategoryDynamic = () => {
const [categoryManagement, setCategoryManagement] = useState([]);
@@ -22,12 +23,17 @@ const CategoryDynamic = () => {
if (data) {
setCategoryManagement(data);
}
- setIsLoading(false);
};
fetchCategoryData();
}, []);
+ useEffect(() => {
+ if (categoryManagement?.length > 0) {
+ setIsLoading(false);
+ }
+ }, [categoryManagement]);
+
const swiperBanner = {
modules: [Pagination],
classNames: 'mySwiper',
@@ -44,95 +50,105 @@ const CategoryDynamic = () => {
{categoryManagement &&
categoryManagement.map((category) => (
<Skeleton key={category.id} isLoaded={!isLoading}>
- <div key={category.id}>
- <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
- <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
- {category.name}
- </h1>
- <Link
- href={createSlug(
- '/shop/category/',
- category?.name,
- category?.category_id
- )}
- className='!text-red-500 font-semibold'
- >
- Lihat Semua
- </Link>
- </div>
+ <LazyLoadComponent key={category.id}>
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+ {category.name}
+ </h1>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
+ </div>
- <Swiper {...swiperBanner}>
- {category?.categories?.map((subCategory) => (
- <SwiperSlide key={subCategory.id}>
- <div className='border rounded justify-start items-start '>
- <div className='p-3'>
- <div className='flex flex-row border rounded mb-2 justify-start items-center'>
- <NextImage
- src={
- subCategory.image
- ? subCategory.image
- : '/images/noimage.jpeg'
- }
- alt={subCategory.name}
- width={90}
- height={30}
- className='object-fit p-4'
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
- <h2 className='font-semibold text-lg mr-2'>
- {subCategory?.name}
- </h2>
- <Link
- href={createSlug(
- '/shop/category/',
- subCategory?.name,
- subCategory?.id_level_2
- )}
- className='!text-red-500 font-semibold'
- >
- Lihat Semua
- </Link>
- </div>
- </div>
- <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
- {subCategory.child_frontend_id_i.map(
- (childCategory) => (
- <div key={childCategory.id} className=''>
+ <Swiper {...swiperBanner}>
+ {category?.categories?.map((subCategory) => (
+ <LazyLoadComponent key={subCategory.id}>
+ <SwiperSlide key={subCategory.id}>
+ <div className='border rounded justify-start items-start '>
+ <div className='p-3'>
+ <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+ <NextImage
+ src={
+ subCategory.image
+ ? subCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={subCategory.name}
+ width={90}
+ height={30}
+ className='object-fit p-4'
+ loading='eager'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+ <h2 className='font-semibold text-lg mr-2'>
+ {subCategory?.name}
+ </h2>
<Link
href={createSlug(
'/shop/category/',
- childCategory?.name,
- childCategory?.id_level_3
+ subCategory?.name,
+ subCategory?.id_level_2
)}
- className='flex flex-row gap-2 border rounded group hover:border-red-500'
+ className='!text-red-500 font-semibold'
>
- <NextImage
- src={
- childCategory.image
- ? childCategory.image
- : '/images/noimage.jpeg'
- }
- alt={childCategory.name}
- className='p-2 ml-1'
- width={40}
- height={40}
- />
- <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
- <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
- {childCategory.name}
- </h3>
- </div>
+ Lihat Semua
</Link>
</div>
- )
- )}
+ </div>
+ <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
+ {subCategory.child_frontend_id_i.map(
+ (childCategory) => (
+ <LazyLoadComponent key={childCategory.id}>
+ <div key={childCategory.id} className=''>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ childCategory?.name,
+ childCategory?.id_level_3
+ )}
+ className='flex flex-row gap-2 border rounded group hover:border-red-500'
+ >
+ <NextImage
+ src={
+ childCategory.image
+ ? childCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={childCategory.name}
+ className='p-2 ml-1'
+ width={40}
+ height={40}
+ placeholder='blur'
+ blurDataURL='/icon.jpg'
+ loading='eager'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+ <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+ {childCategory.name}
+ </h3>
+ </div>
+ </Link>
+ </div>
+ </LazyLoadComponent>
+ )
+ )}
+ </div>
+ </div>
</div>
- </div>
- </div>
- </SwiperSlide>
- ))}
- </Swiper>
- </div>
+ </SwiperSlide>
+ </LazyLoadComponent>
+ ))}
+ </Swiper>
+ </div>
+ </LazyLoadComponent>
</Skeleton>
))}
</div>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 67ae6f5f..5d9e872c 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => {
width={30}
height={30}
className=''
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
<h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
width={40}
height={40}
className='p-2'
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
<h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 562fa138..d8bf3edb 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,56 +4,35 @@ import { bannerApi } from '@/api/bannerApi';
import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+
import { useEffect, useState } from 'react';
const { useQuery } = require('react-query');
const BannerSection = () => {
const { isMobile, isDesktop } = useDevice();
const [data, setData] = useState(null);
const [shouldFetch, setShouldFetch] = useState(false);
+ const [ isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
- const res = await fetch(`/api/hero-banner?type=banner-promotion`);
- const { data } = await res.json();
- if (data) {
- setData(data);
+ try {
+ const res = await fetch(`/api/hero-banner?type=banner-promotion`);
+ const { data } = await res.json();
+ if (data) {
+ setData(data);
+ }
+ } catch (e) {
+ console.log(e);
+ } finally {
+ setIsLoading(false);
}
};
fetchData();
}, []);
- // useEffect(() => {
- // const localData = localStorage.getItem('Homepage_promotionProgram');
- // if (localData) {
- // setData(JSON.parse(localData));
- // } else {
- // setShouldFetch(true);
- // }
- // }, []);
-
- // const getPromotionProgram = useQuery(
- // 'promotionProgram',
- // bannerApi({ type: 'banner-promotion' }),
- // {
- // enabled: shouldFetch,
- // onSuccess: (data) => {
- // if (data) {
- // localStorage.setItem(
- // 'Homepage_promotionProgram',
- // JSON.stringify(data)
- // );
- // setData(data);
- // }
- // },
- // }
- // );
-
const promotionProgram = data;
- // if (getPromotionProgram?.isLoading && !data) {
- // return <BannerPromoSkeleton />;
- // }
- if (!data) {
+ if (isLoading) {
return <BannerPromoSkeleton />;
}
@@ -90,7 +69,8 @@ const BannerSection = () => {
quality={85}
src={banner.image}
alt={banner.name}
- className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+ className='rounded hover:scale-105 transition duration-500 ease-in-out'
+ loading='eager'
/>
</Link>
))}
@@ -103,12 +83,13 @@ const BannerSection = () => {
<SwiperSlide key={banner.id}>
<Link key={banner.id} href={banner.url}>
<Image
- width={439}
- height={150}
- quality={85}
+ width={350}
+ height={100}
+ quality={70}
src={banner.image}
alt={banner.name}
- className='h-auto w-full rounded '
+ className='rounded '
+ loading='eager'
/>
</Link>
</SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..6d03a587 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -18,6 +18,7 @@ const ServiceList = () => {
src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
src='/images/icon_service/WARRANTY.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -68,6 +70,7 @@ const ServiceList = () => {
src='/images/icon_service/DUE-PAYMENT.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
src='/images/icon_service/TAX.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 444ddd8e..19e76a2b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -255,6 +255,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='Flash Sale'
width={17}
height={10}
/>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 113a1e42..4cfd3755 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -219,6 +219,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='Flash Sale'
width={17}
height={10}
/>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 174e5cb1..a8ed90a4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -74,7 +74,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
if (variant == 'vertical') {
return (
<div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]'>
- <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+ <Link href={URL.product} className='border-b border-gray_r-4 relative' aria-label='Produk'>
<div className='relative'>
<Image
src={image}
@@ -90,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-4 h-5 object-contain object-top sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -101,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-11 h-6 object-contain object-top ml-1 mr-1 sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -115,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='h-full'
width={1000}
height={100}
+ loading='eager'
/>
</div>
<div className='relative'>
@@ -127,8 +130,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='flash sale'
width={13}
height={5}
+ loading='eager'
/>
<span className='text-white text-[9px] md:text-[10px] font-semibold'>
{product?.flashSale?.tag != 'false' ||
@@ -150,26 +155,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
<div className='flex justify-between '>
{product?.manufacture?.name ? (
- <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
+ <Link href={URL.manufacture} className='mb-1 mt-1 truncate' aria-label={product.manufacture.name}>
{product.manufacture.name}
</Link>
) : (
<div>-</div>
)}
{product?.isInBu && (
- <Link href='/panduan-pick-up-service' className='group'>
+ <Link href='/panduan-pick-up-service' className='group' aria-label='pickup now'>
<Image
src='/images/PICKUP-NOW.png'
className='group-hover:scale-105 transition-transform duration-200'
alt='pickup now'
width={90}
height={12}
+ loading='eager'
/>
</Link>
)}
</div>
<Link
href={URL.product}
+ aria-label={product?.name}
className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
title={product?.name}
>
@@ -194,6 +201,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -217,6 +225,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -251,7 +260,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
return (
<div className='flex bg-white'>
<div className='w-4/12'>
- <Link href={URL.product} className='relative'>
+ <Link href={URL.product} className='relative' aria-label={product?.name}>
<div className='relative'>
<Image
src={image}
@@ -267,6 +276,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-4 h-5 object-contain object-top sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -278,6 +288,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-11 h-6 object-contain object-top ml-1 sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -295,8 +306,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='flash sae'
width={15}
height={10}
+ loading='eager'
/>
<span className='text-white text-xs font-semibold'>
{' '}
@@ -308,7 +321,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
{product?.manufacture?.name ? (
<div className='flex justify-between'>
- <Link href={URL.manufacture} className='mb-1'>
+ <Link href={URL.manufacture} className='mb-1' aria-label={product?.manufacture.name}>
{product.manufacture.name}
</Link>
{/* {product?.is_in_bu && (
@@ -324,6 +337,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
<Link
href={URL.product}
+ aria-label={product?.name}
className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
>
{product?.name}
@@ -350,6 +364,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -373,6 +388,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 54f209cc..91d199a6 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -35,7 +35,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
<>
{bannerMode && (
<SwiperSlide>
- <Link href={products.banner.url} className='w-full h-full block'></Link>
+ <Link href={products.banner.url} className='w-full h-full block' aria-label={products.banner.name}></Link>
</SwiperSlide>
)}
{products?.products?.map((product, index) => (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:44:11 +0000