From fa5258ed804d4d32cbb81157c141b62411fcbb64 Mon Sep 17 00:00:00 2001
From: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
Date: Fri, 1 Sep 2023 06:15:38 -0500
Subject: [PATCH] create search bar component (#134)

---
 .../15-final/app/ui/dashboard-topnav.tsx      |  8 +++++-
 dashboard/15-final/app/ui/search.tsx          | 28 +++++++++++++++++++
 dashboard/15-final/next.config.js             |  6 +++-
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 dashboard/15-final/app/ui/search.tsx

diff --git a/dashboard/15-final/app/ui/dashboard-topnav.tsx b/dashboard/15-final/app/ui/dashboard-topnav.tsx
index 2da596e..3ad1349 100644
--- a/dashboard/15-final/app/ui/dashboard-topnav.tsx
+++ b/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>
+  )
 }
diff --git a/dashboard/15-final/app/ui/search.tsx b/dashboard/15-final/app/ui/search.tsx
new file mode 100644
index 0000000..6aaee02
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/dashboard/15-final/next.config.js b/dashboard/15-final/next.config.js
index 767719f..950e2f4 100644
--- a/dashboard/15-final/next.config.js
+++ b/dashboard/15-final/next.config.js
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+}
 
 module.exports = nextConfig