1 files changed, 34 insertions, 0 deletions
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
new file mode 100644
index 00000000..b396160f
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -0,0 +1,34 @@
+import style from '../styles/item.module.css'
+
+import { Tooltip } from '@chakra-ui/react'
+
+import Image from '~/components/ui/image'
+import { IProductVariantPromo } from '~/types/promotion'
+
+type Props = {
+  variant: IProductVariantPromo,
+  isFree?: boolean
+}
+
+const ProductPromoItem = ({
+  variant,
+  isFree = false
+}: Props) => {
+  return (
+    <div className={style.item}>
+      <div className={style.image}>
+        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
+        <div className={style.quantity}>
+          {variant.qty} pcs {isFree ? '(free)' : ''}
+        </div>
+      </div>
+      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
+        <div className={style.name}>
+          {variant.name}
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default ProductPromoItem
+\ No newline at end of file