Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

1 files changed, 106 insertions, 0 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
new file mode 100644
index 00000000..0a97b344
--- /dev/null
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -0,0 +1,106 @@
+import style from '../styles/product-card.module.css'
+
+import Link from 'next/link'
+import React from 'react'
+import Image from '~/components/ui/image'
+import clsxm from '~/libs/clsxm'
+import formatCurrency from '~/libs/formatCurrency'
+import { formatToShortText } from '~/libs/formatNumber'
+import { createSlug } from '~/libs/slug'
+import { IProduct } from '~/types/product'
+
+type Props = {
+  product: IProduct
+  layout?: 'vertical' | 'horizontal'
+}
+
+const ProductCard = ({ product, layout = 'vertical' }: Props) => {
+  const URL = {
+    product: createSlug('/shop/product/', product.name, product.id.toString()),
+    manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
+  }
+
+  return (
+    <div className={clsxm(style['wrapper'], {
+      [style['wrapper-v']]: layout === 'vertical',
+      [style['wrapper-h']]: layout === 'horizontal',
+    })}
+    >
+      <div className={clsxm('relative', {
+        [style['image-v']]: layout === 'vertical',
+        [style['image-h']]: layout === 'horizontal',
+      })}>
+        <Link href={URL.product}>
+          <Image
+            src={product.image || '/images/noimage.jpeg'}
+            alt={product.name}
+            width={128}
+            height={128}
+            className='object-contain object-center h-full w-full'
+          />
+          {product.variant_total > 1 && (
+            <div className={style['variant-badge']}>{product.variant_total} Varian</div>
+          )}
+        </Link>
+      </div>
+
+      <div className={clsxm({
+        [style['content-v']]: layout === 'vertical',
+        [style['content-h']]: layout === 'horizontal',
+      })}>
+        <Link
+          href={URL.manufacture}
+          className={style['brand']}
+        >
+          {product.manufacture.name}
+        </Link>
+
+        <div className='h-0.5' />
+
+        <Link
+          href={URL.product}
+          className={clsxm(style['name'], {
+            [style['name-v']]: layout === 'vertical',
+            [style['name-h']]: layout === 'horizontal',
+          })}
+        >
+          {product.name}
+        </Link>
+        <div className='h-1.5' />
+
+        <div className={style['price']}>
+          Rp {formatCurrency(product.lowest_price.price)}
+        </div>
+
+        <div className='h-1.5' />
+
+        <div className={style['price-inc']}>
+          Inc PPN:
+          Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+        </div>
+
+        <div className='h-1' />
+
+        <div className='flex items-center gap-x-2.5'>
+          {product.stock_total > 0 && (
+            <div className={style['ready-stock']}>
+              Ready Stock
+            </div>
+          )}
+          {product.qty_sold > 0 && (
+            <div className={style['sold']}>
+              {formatToShortText(product.qty_sold)} Terjual
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+const classPrefix = ({ layout }: Props) => {
+
+}
+
+export default ProductCard
\ No newline at end of file