From f975652208749fa6eae221a31319de982051e8a3 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 26 May 2023 20:22:55 +0100
Subject: [PATCH] added basic addresses page"

---
 src/app/portfolio/[slug]/page.tsx |  2 +-
 src/app/search/page.tsx           | 61 ++++++++++++++++++++++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
index 3fa8314..6769a28 100644
--- a/src/app/portfolio/[slug]/page.tsx
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -80,7 +80,7 @@ export default async function Page({
     page_config = Portfolios.filter((portfolio) => {
       return portfolio.id == params.slug;
     })[0];
-    pageName = page_config.name;
+    pageName = page_config.title;
   }
 
   // TODO: Add the porfolio summary information on the left
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 20e48f4..eb95d9a 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,3 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import SubmitButton from "../components/search/SubmitButton";
+import { useRouter } from "next/navigation";
+
 export default function Search() {
-  return <>Hi</>;
+  const [postcode, setPostcode] = useState("");
+  const [buttonDisabled, setButtonDisabled] = useState(true);
+  const router = useRouter();
+
+  // Do something better than logging the error
+  // Should probablt redirect to a something went wrong page
+  const redirectToSearch = () => {
+    router.push(`/results?postcode=${postcode}`);
+  };
+
+  const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      redirectToSearch();
+    }
+  };
+
+  const handlePostcodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // If the text is empty, disable the button, otherwise enable it
+    setPostcode(e.target.value);
+    if (e.target.value) {
+      setButtonDisabled(false);
+      return;
+    }
+    setButtonDisabled(true);
+    return;
+  };
+
+  const submitProps = {
+    buttonDisabled: buttonDisabled,
+    redirectFunc: redirectToSearch,
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center pt-40">
+      <form>
+        <label
+          className="mb-2 block text-sm font-bold text-gray-700"
+          htmlFor="search"
+        >
+          Enter your postcode to get started
+        </label>
+        <input
+          id="search"
+          className="w-full appearance-none rounded border-2 border-gray-200 bg-gray-200 px-4 py-2 leading-tight text-gray-700 focus:border-brandmidblue focus:bg-white focus:outline-none"
+          type="text"
+          placeholder="Enter your postcode"
+          onChange={handlePostcodeChange}
+          onKeyDown={handleSubmit}
+        />
+        <SubmitButton {...submitProps} />
+      </form>
+    </div>
+  );
 }