create search bar component (#134)

dashboard/15-final/app/ui/dashboard-topnav.tsx

@@ -1,3 +1,9 @@
+import Search from "./search";
+
 export default function TopNav() {
-  return <div className="h-16 border-b">Search</div>;
+  return (
+    <div className="h-16 border-b flex items-center">
+      <Search />
+    </div>
+  )
 }

dashboard/15-final/app/ui/search.tsx

@@ -0,0 +1,28 @@
+import {
+  MagnifyingGlassIcon
+} from "@heroicons/react/24/outline";
+
+export default function Search() {
+  async function submitForm(formData: FormData) {
+    'use server'
+    // TODO: Implement search
+    // console.log(formData)
+  }
+  return (
+    <div className="w-full h-full px-4 relative flex items-center">
+      <MagnifyingGlassIcon className="h-5 text-gray-400"/>
+      <form className="h-full w-full" action={submitForm}>
+        <label htmlFor="search-field" className="sr-only">
+          Search
+        </label>
+        <input
+          id="search-field"
+          className="focus:outline-none px-2 h-full w-full border-0 text-gray-900 placeholder:text-gray-400 focus:ring-0"
+          placeholder="Search..."
+          type="search"
+          name="search"
+        />
+      </form>
+    </div>
+  )
+}

dashboard/15-final/next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+}
 
 module.exports = nextConfig