diff options
Diffstat (limited to 'src-migrate/modules/product-card/components')
| -rw-r--r-- | src-migrate/modules/product-card/components/ProductCard.tsx | 144 |
1 files changed, 144 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..0febfadb --- /dev/null +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -0,0 +1,144 @@ +import style from '../styles/product-card.module.css' +import ImageNext from 'next/image'; +import clsx from 'clsx' +import Link from 'next/link' +import React, { useEffect, useMemo, useState } from 'react' +import Image from '~/components/ui/image' +import useUtmSource from '~/hooks/useUtmSource' +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 utmSource = useUtmSource() + + + const URL = { + product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`, + manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()), + } + + const image = useMemo(() => { + if (product.image) return product.image + '?ratio=square' + return '/images/noimage.jpeg' + }, [product.image]) + + 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}> + + <div className="relative"> + <Image + src={image} + alt={product.name} + width={128} + height={128} + className='object-contain object-center h-full w-full' + /> + <div className="absolute top-0 right-0 flex mt-2"> + <div className="gambarB "> + {product.isSni && ( + <ImageNext + src="/images/sni-logo.png" + alt="SNI Logo" + className="w-3 h-4 object-contain object-top sm:h-4" + width={50} + height={50} + /> + )} + </div> + <div className="gambarC "> + {product.isTkdn && ( + <ImageNext + src="/images/TKDN.png" + alt="TKDN" + className="w-5 h-4 object-contain object-top ml-1 mr-1 sm:h-6" + width={50} + height={50} + /> + )} + </div> + </div> + </div> + + {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 |