added basic addresses page"

This commit is contained in:
Khalim Conn-Kowlessar 2023-05-26 20:22:55 +01:00
parent f2e94b5fb8
commit f975652208
2 changed files with 61 additions and 2 deletions

View file

@ -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

View file

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