Refactor hero banner and popular product section

1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
new file mode 100644
index 00000000..211291c8
--- /dev/null
+++ b/src/components/ui/PopularProduct.jsx
@@ -0,0 +1,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