create desktop header

1 files changed, 39 insertions, 35 deletions

diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index ff2c7adb..644e0c9f 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -3,6 +3,8 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Link from '../Link/Link'
 import { useRouter } from 'next/router'
+import MobileView from '../../views/MobileView'
+import DesktopView from '../../views/DesktopView'
 
 const Search = () => {
   const router = useRouter()
@@ -50,43 +52,45 @@ const Search = () => {
   }
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className='flex relative'
-    >
-      <input
-        type='text'
-        ref={queryRef}
-        className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6'
-        placeholder='Ketik nama, part number, merk'
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        onBlur={onInputBlur}
-        onFocus={loadSuggestion}
-      />
-      <button
-        type='submit'
-        className='rounded-r border border-l-0 border-gray_r-6 px-2'
+    <>
+      <form
+        onSubmit={handleSubmit}
+        className='flex-1 flex relative'
       >
-        <MagnifyingGlassIcon className='w-6' />
-      </button>
+        <input
+          type='text'
+          ref={queryRef}
+          className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6'
+          placeholder='Ketik nama, part number, merk'
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onBlur={onInputBlur}
+          onFocus={loadSuggestion}
+        />
+        <button
+          type='submit'
+          className='rounded-r border border-l-0 border-gray_r-6 px-2'
+        >
+          <MagnifyingGlassIcon className='w-6' />
+        </button>
 
-      {suggestions.length > 1 && (
-        <>
-          <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6'>
-            {suggestions.map((suggestion, index) => (
-              <Link
-                href={`/shop/search?q=${suggestion.term}`}
-                key={index}
-                className='px-3 py-3 !text-gray_r-12 font-normal'
-              >
-                {suggestion.term}
-              </Link>
-            ))}
-          </div>
-        </>
-      )}
-    </form>
+        {suggestions.length > 1 && (
+          <>
+            <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
+              {suggestions.map((suggestion, index) => (
+                <Link
+                  href={`/shop/search?q=${suggestion.term}`}
+                  key={index}
+                  className='px-3 py-3 !text-gray_r-12 font-normal'
+                >
+                  {suggestion.term}
+                </Link>
+              ))}
+            </div>
+          </>
+        )}
+      </form>
+    </>
   )
 }