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>
   )
 }

packages/next/components/PostQuery.tsx

@@ -36,8 +36,9 @@ const PostQuery = ({
     return pathname
   }
 
-  const [posts, setPosts] = useState(defaults.posts)
-  const [count, setCount] = useState(defaults.count)
+  const [posts, setPosts] = useState([] as IPost[])
+  const [count, setCount] = useState(0)
+  const [isLoading, setLoading] = useState(true)
 
   useEffect(() => {
     if (router.query.q) {
@@ -62,13 +63,15 @@ const PostQuery = ({
       setPosts(defaults.posts)
       setCount(defaults.count)
     }
+
+    setLoading(false)
   }, [router.query.q, router.query.page, router.query.tag])
 
   const totalPages = Math.ceil(count / 5)
 
   return (
     <article>
-      {posts.length ? (
+      {isLoading ? null : posts.length ? (
         posts.map((p) => <PostTeaser post={p} key={p.path} />)
       ) : (
         <p>No posts found.</p>

packages/next/components/PostTeaser.tsx

@@ -1,8 +1,8 @@
-import { THEME } from '~/assets/global'
-import { formatDate } from '~/assets/util'
 import { IPost } from '~/server/db'
 import Link from 'next/link'
 
+import TitleDescription from './TitleDesciption'
+
 const PostTeaser = ({ post }: { post: IPost }) => {
   return (
     <section>
@@ -12,31 +12,8 @@ const PostTeaser = ({ post }: { post: IPost }) => {
         </Link>
       </h2>
 
-      <small>
-        <span>
-          by&nbsp;
-          {THEME.author.url ? (
-            <a
-              href={THEME.author.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {THEME.author.name}
-            </a>
-          ) : (
-            <span>{THEME.author.name}</span>
-          )}
-        </span>
-
-        {post.date ? (
-          <span style={{ float: 'right' }}>{formatDate(post.date)}</span>
-        ) : null}
-      </small>
-
-      <article
-        style={{ marginTop: '2rem' }}
-        dangerouslySetInnerHTML={{ __html: post.excerptHtml }}
-      ></article>
+      <TitleDescription date={post.date} />
+      <article dangerouslySetInnerHTML={{ __html: post.excerptHtml }}></article>
     </section>
   )
 }

packages/next/components/TitleDesciption.tsx

@@ -0,0 +1,32 @@
+import { THEME } from '~/assets/global'
+import styles from '~/styles/TitleDescription.module.css'
+
+const TitleDescription = ({ date }: { date?: number }) => {
+  return (
+    <small className={styles.Small}>
+      <span>
+        by&nbsp;
+        {THEME.author.url ? (
+          <a href={THEME.author.url} target="_blank" rel="noopener noreferrer">
+            {THEME.author.name}
+          </a>
+        ) : (
+          <span>{THEME.author.name}</span>
+        )}
+      </span>
+
+      {date ? (
+        <span className={styles.date}>
+          {new Date(date).toLocaleDateString([], {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'short'
+          })}
+        </span>
+      ) : null}
+    </small>
+  )
+}
+
+export default TitleDescription