summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/core/components/elements/Navbar/Navbar.jsx45
-rw-r--r--src/core/components/elements/Navbar/Search.jsx14
-rw-r--r--src/core/components/views/DesktopView.jsx16
-rw-r--r--src/core/components/views/MobileView.jsx16
-rw-r--r--src/lib/category/components/Category.jsx31
-rw-r--r--src/pages/index.jsx27
-rw-r--r--src/styles/globals.css23
7 files changed, 140 insertions, 32 deletions
diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index c88bfad3..1c559faf 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
import IndoteknikLogo from '@/images/logo.png'
import {
Bars3Icon,
+ ChevronDownIcon,
DocumentCheckIcon,
HeartIcon,
ShoppingCartIcon
@@ -50,7 +51,7 @@ const Navbar = () => {
</MobileView>
<DesktopView>
- <div className='py-3 bg-yellow_r-10'>
+ <div className='py-3 bg-yellow_r-10/60'>
<div className='container mx-auto flex justify-between'>
<Link
href='/'
@@ -81,7 +82,7 @@ const Navbar = () => {
</div>
</div>
- <nav className='py-6 sticky top-0 z-50 bg-white shadow'>
+ <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
<div className='container mx-auto flex gap-x-6'>
<Link href='/'>
<Image
@@ -123,7 +124,7 @@ const Navbar = () => {
className='flex items-center gap-x-1 !text-gray_r-12/80'
>
<Image
- src='/images/socials/whatsapp-2.png'
+ src='/images/socials/Whatsapp-2.png'
alt='Whatsapp'
width={48}
height={48}
@@ -137,35 +138,57 @@ const Navbar = () => {
</div>
</nav>
- <div className='container mx-auto my-6'>
- <div className='flex bg-gray_r-4 rounded-t-xl'>
- <div className='w-3/12 p-4 font-semibold'>Kategori Produk</div>
- <div className='w-6/12 border-x border-gray_r-1 flex'>
+ <div className='container mx-auto mt-6'>
+ <div className='flex bg-gray_r-2'>
+ <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center'>
+ <div>Kategori Produk</div>
+ <button
+ type='button'
+ className='ml-auto pl-3'
+ >
+ <ChevronDownIcon className='w-6' />
+ </button>
+ </div>
+ <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
<Link
href='/'
- className='p-4 flex-1 text-center !text-gray_r-12/80'
+ 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'
>
Promo Produk
</Link>
<Link
href='/'
- className='p-4 flex-1 text-center !text-gray_r-12/80'
+ 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
</Link>
<Link
href='/'
- className='p-4 flex-1 text-center !text-gray_r-12/80'
+ 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'
>
Ready Stock
</Link>
<Link
href='/'
- className='p-4 flex-1 text-center !text-gray_r-12/80'
+ 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'
>
Blog Indoteknik
</Link>
</div>
+ <div className='w-3/12 flex gap-x-1'>
+ <Link
+ href='/login'
+ className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
+ >
+ Masuk
+ </Link>
+ <Link
+ href='/register'
+ className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
+ >
+ Daftar
+ </Link>
+ </div>
</div>
</div>
</DesktopView>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index e78f7f29..32a8d170 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -7,20 +7,14 @@ import { useRouter } from 'next/router'
const Search = () => {
const router = useRouter()
const queryRef = useRef()
- const [query, setQuery] = useState('')
+ const [query, setQuery] = useState(router.query.q || '')
const [suggestions, setSuggestions] = useState([])
- useEffect(() => {
- setQuery(router.query.q)
- }, [router.query])
-
const loadSuggestion = useCallback(() => {
if (query && document.activeElement == queryRef.current) {
- ;(async () => {
- const dataSuggestion = await searchSuggestApi({ query })
- setSuggestions(dataSuggestion.data.suggestions)
- })()
- return
+ searchSuggestApi({ query }).then((response) => {
+ setSuggestions(response.data.suggestions)
+ })
} else {
setSuggestions([])
}
diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
index 31a67936..08c4b310 100644
--- a/src/core/components/views/DesktopView.jsx
+++ b/src/core/components/views/DesktopView.jsx
@@ -1,11 +1,23 @@
-import isMobile from 'is-mobile'
import { useEffect, useState } from 'react'
const DesktopView = ({ children }) => {
const [view, setView] = useState(<></>)
useEffect(() => {
- if (!isMobile()) setView(children)
+ const handleResize = () => {
+ if (window.innerWidth >= 768) {
+ setView(children)
+ } else {
+ setView(<></>)
+ }
+ }
+
+ handleResize()
+ window.addEventListener('resize', handleResize)
+
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
}, [children])
return view
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
index be8aa293..348572c6 100644
--- a/src/core/components/views/MobileView.jsx
+++ b/src/core/components/views/MobileView.jsx
@@ -1,11 +1,23 @@
-import isMobile from 'is-mobile'
import { useEffect, useState } from 'react'
const MobileView = ({ children }) => {
const [view, setView] = useState(<></>)
useEffect(() => {
- if (isMobile()) setView(children)
+ const handleResize = () => {
+ if (window.innerWidth < 768) {
+ setView(children)
+ } else {
+ setView(<></>)
+ }
+ }
+
+ handleResize()
+ window.addEventListener('resize', handleResize)
+
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
}, [children])
return view
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
new file mode 100644
index 00000000..21e2ec6f
--- /dev/null
+++ b/src/lib/category/components/Category.jsx
@@ -0,0 +1,31 @@
+import Link from '@/core/components/elements/Link/Link'
+import DesktopView from '@/core/components/views/DesktopView'
+
+const Category = () => {
+ return (
+ <DesktopView>
+ <div className='category-box'>
+ <div>
+ <Link href='/'>Alat Potong & Pelengkap Mesin</Link>
+ <div>
+ <div className='font-medium'>Alat Potong & Pelengkap Mesin</div>
+ </div>
+ </div>
+ <div>
+ <Link href='/'>Alat Ukur & Instrument</Link>
+ <div>
+ <div className='font-medium'>Alat Ukur & Instrument</div>
+ </div>
+ </div>
+ <div>
+ <Link href='/'>Komponen Mekanikal & Hardware</Link>
+ <div>
+ <div className='font-medium'>Komponen Mekanikal & Hardware</div>
+ </div>
+ </div>
+ </div>
+ </DesktopView>
+ )
+}
+
+export default Category
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 19d3e59c..2c63e772 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -2,6 +2,9 @@ import dynamic from 'next/dynamic'
import Seo from '@/core/components/Seo'
import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Category from '@/lib/category/components/Category'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
@@ -25,12 +28,24 @@ export default function Home() {
return (
<BasicLayout>
<Seo title='Beranda - Indoteknik' />
- <HeroBanner />
- <div className='flex flex-col gap-y-6 my-6'>
- <PreferredBrand />
- <PopularProduct />
- <CategoryHomeId />
- </div>
+ <DesktopView>
+ <div className="container mx-auto">
+ <div className='flex'>
+ <div className='w-3/12'>
+ <Category />
+ </div>
+ </div>
+ </div>
+ </DesktopView>
+
+ <MobileView>
+ <HeroBanner />
+ <div className='flex flex-col gap-y-6 my-6'>
+ <PreferredBrand />
+ <PopularProduct />
+ <CategoryHomeId />
+ </div>
+ </MobileView>
</BasicLayout>
)
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0137351e..f551f9f7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -18,7 +18,7 @@ body {
}
#__next main {
- @apply min-h-screen
+ @apply min-h-screen;
}
button {
@@ -380,3 +380,24 @@ button {
.form-select__control--menu-is-open {
@apply !border-yellow_r-9;
}
+
+.category-box {
+ @apply py-2 border border-gray_r-6;
+}
+
+.category-box > div {
+ @apply relative text-gray_r-12/80;
+}
+
+.category-box a {
+ @apply py-2.5 px-4 idt-transition text-gray_r-12/80 hover:bg-gray_r-4;
+}
+
+.category-box a + div {
+ @apply absolute left-[100%] top-0 w-[40vw] bg-gray_r-1 border border-gray_r-6 p-4 hidden;
+}
+
+.category-box a:hover + div,
+.category-box a + div:hover {
+ @apply block;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:17:47 +0000