3 files changed, 48 insertions, 4 deletions
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 1b5bf165..96bd8917 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -9,7 +9,7 @@ import { useMemo } from 'react'
 import Link from '@/core/components/elements/Link/Link'
 import Image from '@/core/components/elements/Image/Image'
 import { useQuery } from 'react-query'
-import { BannerApi } from '@/api/BannerApi'
+import { bannerApi } from '@/api/bannerApi'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
 
 const swiperBanner = {
@@ -24,7 +24,7 @@ const swiperBanner = {
 }
 
 const HeroBanner = () => {
-  const heroBanner = useQuery('heroBanner', BannerApi({ type: 'index-a-1' }))
+  const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }))
 
   const swiperBannerMobile = {
     ...swiperBanner,
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index a3227002..b1023990 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -4,10 +4,10 @@ import Image from 'next/image'
 import { useMemo } from 'react'
 import { useQuery } from 'react-query'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
-import { BannerApi } from '@/api/BannerApi'
+import { bannerApi } from '@/api/bannerApi'
 
 const HeroBannerSecondary = () => {
-  const heroBannerSecondary = useQuery('heroBannerSecondary', BannerApi({ type: 'index-a-2' }))
+  const heroBannerSecondary = useQuery('heroBannerSecondary', bannerApi({ type: 'index-a-2' }))
 
   const randomIndex = useMemo(() => {
     if (!heroBannerSecondary.data) return null
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