fix searching

packages/next/components/Layout.tsx

@@ -1,14 +1,19 @@
 import { THEME } from '~/assets/global'
+import styles from '~/styles/Layout.module.css'
 import Link from 'next/link'
-import { ReactNode } from 'react'
+import { useRouter } from 'next/router'
+import { ReactNode, useState } from 'react'
+
+const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
+  const router = useRouter()
+  const [q, setQ] = useState(router.query.q as string)
 
-const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <main>
-      <header>
+      <header className={styles.Header}>
         <h1>{THEME.title}</h1>
 
-        <nav>
+        <nav className={styles.Nav}>
           <ul>
             <li>
               <Link href="/">
@@ -34,35 +39,28 @@ const Layout = ({ children }: { children: ReactNode }) => {
             )}
           </ul>
 
-          <form>
-            <input name="q" type="search" placeholder="Search..." />
-            <div className="icon">🔎</div>
+          <form
+            className={styles.Form}
+            onSubmit={(ev) => {
+              if (router.pathname.startsWith('/post/')) {
+                ev.preventDefault()
+                router.push(`/blog?q=${encodeURIComponent(q)}`)
+              }
+            }}
+          >
+            <input
+              name="q"
+              type="search"
+              placeholder="Search..."
+              value={q}
+              onInput={(ev) => setQ((ev.target as HTMLInputElement).value)}
+            />
+            <div className={styles.icon}>🔎</div>
           </form>
         </nav>
       </header>
+
       {children}
-
-      <style jsx>{`
-        nav ul {
-          display: inline-block;
-        }
-
-        form {
-          float: right;
-          max-width: 300px;
-          position: relative;
-        }
-
-        form .icon {
-          position: absolute;
-          right: 5px;
-          top: 5px;
-        }
-
-        input {
-          padding-right: 1.5em;
-        }
-      `}</style>
     </main>
   )
 }