diff options
Diffstat (limited to 'src/lib/product')
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 24 |
1 files changed, 19 insertions, 5 deletions
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 174e5cb1..2291398d 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -73,7 +73,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]'> + <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]' aria-label='Produk'> <Link href={URL.product} className='border-b border-gray_r-4 relative'> <div className='relative'> <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'> @@ -129,6 +132,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' width={13} height={5} + loading='eager' /> <span className='text-white text-[9px] md:text-[10px] font-semibold'> {product?.flashSale?.tag != 'false' || @@ -150,26 +154,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 +200,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 +224,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 +259,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 +275,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 +287,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> @@ -297,6 +307,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' width={15} height={10} + loading='eager' /> <span className='text-white text-xs font-semibold'> {' '} @@ -308,7 +319,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 +335,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 +362,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 +386,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { rel='noopener noreferrer' target='_blank' href={callForPriceWhatsapp} + aria-label='Call for Inquiry' > Call for Inquiry </a> |