diff options
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 2 | ||||
| -rw-r--r-- | src/lib/brand/components/Brands.jsx | 12 | ||||
| -rw-r--r-- | src/pages/shop/brands/index.jsx | 11 |
3 files changed, 19 insertions, 6 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index faba7013..db281e9a 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -98,7 +98,7 @@ const NavbarDesktop = () => { Promo Produk </Link> <Link - href='/' + href='/shop/brands' className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition' > Semua Brand diff --git a/src/lib/brand/components/Brands.jsx b/src/lib/brand/components/Brands.jsx index 22f47975..777e05ac 100644 --- a/src/lib/brand/components/Brands.jsx +++ b/src/lib/brand/components/Brands.jsx @@ -1,5 +1,7 @@ import odooApi from '@/core/api/odooApi' import Spinner from '@/core/components/elements/Spinner/Spinner' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import { useCallback, useEffect, useState } from 'react' import BrandCard from './BrandCard' @@ -37,9 +39,11 @@ const Brands = () => { if (isLoading) { return ( - <div className='flex justify-center my-4'> - <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> - </div> + <> + <div className='container flex justify-center my-4'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12 md:w-20 md:mt-28' /> + </div> + </> ) } @@ -62,7 +66,7 @@ const Brands = () => { ))} </div> - <div className='grid grid-cols-4 gap-4 mt-4 !overflow-x-hidden'> + <div className='grid grid-cols-4 gap-4 mt-4 md:grid-cols-7 !overflow-x-hidden'> {manufactures?.map( (manufacture, index) => manufacture.name && ( diff --git a/src/pages/shop/brands/index.jsx b/src/pages/shop/brands/index.jsx index 5c01fd19..77fde173 100644 --- a/src/pages/shop/brands/index.jsx +++ b/src/pages/shop/brands/index.jsx @@ -1,10 +1,19 @@ import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import BrandsComponent from '@/lib/brand/components/Brands' export default function Brands() { return ( <BasicLayout> - <BrandsComponent /> + <MobileView> + <BrandsComponent /> + </MobileView> + <DesktopView> + <div className='container mx-auto mt-10 flex mb-3'> + <BrandsComponent /> + </div> + </DesktopView> </BasicLayout> ) } |