blob: 211291c8d39ad156cc47eb02b9bf13a958dfc6d3 (
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
|
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'
const PopularProduct = () => {
const popularProduct = useQuery('popularProduct', popularProductApi())
if (popularProduct.isLoading) return <PopularProductSkeleton />
return (
popularProduct.data && (
<>
<MobileView>
<div className='px-4'>
<div className='font-medium mb-4'>Produk Banyak Dilihat</div>
<ProductSlider products={popularProduct.data} simpleTitle />
</div>
</MobileView>
<DesktopView>
<div className='border border-gray_r-6 h-full overflow-auto'>
<div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
Produk Banyak Dilihat
</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
|
