1 files changed, 39 insertions, 0 deletions
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
new file mode 100644
index 00000000..2c5e989b
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -0,0 +1,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
+\ No newline at end of file