blob: 2c5e989b0e4d1f7083d8a32e8425cac9f4d762b5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import React from 'react'
import { InfoIcon } from 'lucide-react'
import { Tooltip } from '@chakra-ui/react'
import { IProductDetail } from '~/types/product'
import ImageUI from '~/components/ui/image'
type Props = {
product: IProductDetail
}
const Image = ({ product }: Props) => {
return (
<div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'>
<ImageUI
src={product.image || '/images/noimage.jpeg'}
alt={product.name}
width={256}
height={256}
className='object-contain object-center h-full w-full'
classNames={{ wrapper: 'h-full w-full' }}
loading='eager'
priority
/>
<div className='absolute hidden md:block top-4 right-4'>
<Tooltip
placement='bottom-end'
label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
>
<div className="text-gray-600">
<InfoIcon size={20} />
</div>
</Tooltip>
</div>
</div>
)
}
export default Image
|
