blob: d3ae9e27e9891d815bf6e427d0f6eae966277ece (
plain)
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
|
import { popularProductApi } from '@/api/productApi'
import MobileView from '@/core/components/views/MobileView'
import ProductSlider from '@/lib/product/components/ProductSlider'
import { useQuery } from 'react-query'
import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton'
import DesktopView from '@/core/components/views/DesktopView'
import ProductCard from '@/lib/product/components/ProductCard'
import Link from '@/core/components/elements/Link/Link'
const PopularProduct = () => {
const popularProduct = useQuery('popularProduct', popularProductApi())
if (popularProduct.isLoading) return <PopularProductSkeleton />
return (
popularProduct.data && (
<>
<MobileView>
<div className='px-4'>
<div className='font-semibold mb-4 flex justify-between items-center'><p>
Produk Ready Stock
</p>
<Link
href='/shop/search?orderBy=stock'
className=''
>
<p className='text-danger-500 font-semibold'>Lihat Semua</p>
</Link></div>
<ProductSlider products={popularProduct.data} simpleTitle />
</div>
</MobileView>
<DesktopView>
<div className='border border-gray_r-6 h-full overflow-auto'>
<div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center'>
<p>
Produk Ready Stock
</p>
<Link
href='/shop/search?orderBy=stock'
className=''
>
<p className='text-danger-500 font-semibold'>Lihat Semua</p>
</Link>
</div>
<div className='h-full divide-y divide-gray_r-6'>
{popularProduct.data &&
popularProduct.data.products.map((product) => (
<div className='py-2' key={product.id}>
<ProductCard product={product} variant='horizontal' />
</div>
))}
</div>
</div>
</DesktopView>
</>
)
)
}
export default PopularProduct
|
