diff options
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 41 |
1 files changed, 23 insertions, 18 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 48270dee..e4ba2b2f 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -143,24 +143,29 @@ const ProductDetail = ({ product }: Props) => { return ( <> - {isDesktop && !hasPrice && ( - <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'> - <img - src='/images/produk_tidak_tersedia.svg' - alt='Produk tidak tersedia' - className='w-[35%] opacity-[50%] -translate-x-[10%]' - /> - </div> - )} - {isMobile && !hasPrice && ( - <div className='fixed inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'> - <img - src='/images/produk_tidak_tersedia.svg' - alt='Produk tidak tersedia' - className='w-[100%] opacity-[75%] -translate-x-[2%]' - /> - </div> - )} + <div className='relative'> + {isDesktop && !hasPrice && ( + <div className='absolute inset-0 z-[20] flex items-center justify-center pointer-events-none select-none'> + <img + src='/images/produk_tidak_tersedia.svg' + alt='Produk tidak tersedia' + className='w-[47%] opacity-50 -translate-x-[3%] -translate-y-[-70%]' + /> + </div> + )} + </div> + + <div className='relative'> + {isMobile && !hasPrice && ( + <div className='absolute inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'> + <img + src='/images/produk_tidak_tersedia.svg' + alt='Produk tidak tersedia' + className='w-[100%] opacity-[1000%] -translate-x-[0%] -translate-y-[-197%]' + /> + </div> + )} + </div> <div className='md:flex md:flex-wrap'> <div className='w-full mb-4 md:mb-0 px-4 md:px-0'> |