From eba77ec64cf0aea9178c68f0fe67405a9284e36f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Thu, 25 May 2023 13:47:31 +0000
Subject: [PATCH] feat(ui): add `Search` compoentn to `Header`

---
 src/components/Header.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index bb94d65c..0b3bdde7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
 
 import { ToggleTheme } from './ToggleTheme'
+import { Search } from './Search'
 
 export function Header() {
   const [percentScrollPosition, setPercentScrollPosition] = useState(0)
@@ -70,13 +71,16 @@ export function Header() {
             Mateus Felipe
           </h1>
         </Link>
-        <div className="flex flex-wrap items-center justify-center gap-8">
+        <div className="flex flex-wrap items-center justify-center gap-3 md:gap-8">
           <nav className="flex flex-wrap items-center justify-center gap-5">
             <MenuItem name="Home" path="/" />
             <MenuItem name="Categories" path="/categories" />
             <MenuItem name="Portifolio" path="/portifolio" />
           </nav>
-          <ToggleTheme />
+          <div className="flex w-full items-center gap-8 md:w-auto">
+            <Search />
+            <ToggleTheme />
+          </div>
         </div>
       </div>
     </header>