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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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
|
