category, brand, product popular, product category in desktop home page

3 files changed, 57 insertions, 17 deletions

diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
index ac43e2bc..05f0ca28 100644
--- a/src/lib/home/components/CategoryHome.jsx
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -6,7 +6,7 @@ const CategoryHome = ({ id }) => {
   const { categoryHome } = useCategoryHome({ id })
 
   return (
-    <div className='p-4 relative bg-yellow_r-2'>
+    <div className='p-4 sm:py-8 relative bg-yellow_r-2 border border-yellow_r-5'>
       {categoryHome.data ? (
         <ProductSlider
           products={{
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
index d23275f7..78dc5d49 100644
--- a/src/lib/home/components/PopularProduct.jsx
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -1,23 +1,50 @@
-import { Swiper, SwiperSlide } from 'swiper/react'
 import usePopularProduct from '../hooks/usePopularProduct'
-import ProductCard from '@/lib/product/components/ProductCard'
 import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
 import ProductSlider from '@/lib/product/components/ProductSlider'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import ProductCard from '@/lib/product/components/ProductCard'
 
 const PopularProduct = () => {
   const { popularProducts } = usePopularProduct()
 
   return (
-    <div className='px-4'>
-      <div className='font-medium mb-4'>Produk Populer</div>
-      {popularProducts.isLoading && <PopularProductSkeleton />}
-      {!popularProducts.isLoading && (
-        <ProductSlider
-          products={popularProducts.data}
-          simpleTitle
-        />
-      )}
-    </div>
+    <>
+      <MobileView>
+        <div className='px-4'>
+          <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
+          {popularProducts.isLoading && <PopularProductSkeleton />}
+          {!popularProducts.isLoading && (
+            <ProductSlider
+              products={popularProducts.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'>
+            {popularProducts.data &&
+              popularProducts.data.products.map((product) => (
+                <div
+                  className='py-2'
+                  key={product.id}
+                >
+                  <ProductCard
+                    product={product}
+                    variant='horizontal'
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+      </DesktopView>
+    </>
   )
 }
 
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 3df3cdb7..7edd0730 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -2,18 +2,31 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import usePreferredBrand from '../hooks/usePreferredBrand'
 import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
 import BrandCard from '@/lib/brand/components/BrandCard'
+import useDevice from '@/core/hooks/useDevice'
+import Link from '@/core/components/elements/Link/Link'
 
 const PreferredBrand = () => {
   const { preferredBrands } = usePreferredBrand()
+  const { isMobile, isDesktop } = useDevice()
 
   return (
-    <div className='px-4'>
-      <div className='font-medium mb-4'>Brand Pilihan</div>
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <div className='font-medium sm:text-h-lg'>Brand Pilihan</div>
+        {isDesktop && (
+          <Link
+            href='/'
+            className='btn-yellow !text-gray_r-12'
+          >
+            Lihat Semua
+          </Link>
+        )}
+      </div>
       {preferredBrands.isLoading && <PreferredBrandSkeleton />}
       {!preferredBrands.isLoading && (
         <Swiper
-          slidesPerView={3.5}
-          spaceBetween={12}
+          slidesPerView={isMobile ? 3.5 : 7.5}
+          spaceBetween={isMobile ? 12 : 24}
           freeMode
         >
           {preferredBrands.data?.manufactures.map((brand) => (