blob: 361580eabdb72f188a243e7c506436a6c9f4a90f (
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
|
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-[340px] border border-gray-200 rounded-lg p-2 relative'>
<ImageUI
src={product.image || '/images/noimage.jpeg'}
alt={product.name}
width={512}
height={512}
className='object-contain object-center h-full'
classNames={{ wrapper: 'h-full' }}
/>
<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
|
