moved components to their own files

This commit is contained in:
Khalim Conn-Kowlessar 2023-05-29 15:40:46 +01:00
parent 6e99e1b58d
commit 73ae41d4e0

View file

@ -4,6 +4,8 @@ import { useState } from "react";
import SearchPostcodeButton from "../components/search/SearchPostcodeButton";
import { useRouter } from "next/navigation";
import { SearchData, SearchResult } from "@/types/epc";
import SelectAddressButton from "../components/search/SelectAddressButton";
import ToggleAddressButton from "../components/search/ToggleAddressButton";
const defaultToggleClass =
"mb-1 block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
@ -11,59 +13,6 @@ const defaultToggleClass =
const toggledButtonClass =
"text-white mb-1 block max-w-sm rounded-lg border border-gray-200 bg-brandblue p-6 shadow hover:bg-hoverblue dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
interface ToggleAddressButtonProps {
rowKey: string;
setButtonDisabled: (value: boolean) => void;
setAddress: (value: string) => void;
setCurrentlyToggled: (value: string) => void;
toggleClassName: string;
address: string;
}
function ToggleAddressButton({
rowKey,
setButtonDisabled,
setAddress,
setCurrentlyToggled,
toggleClassName,
address,
}: ToggleAddressButtonProps) {
const handleOnClick = () => {
setCurrentlyToggled(rowKey);
setAddress(address);
setButtonDisabled(false);
};
return (
<li key={rowKey}>
<a onClick={handleOnClick} className={toggleClassName}>
{address}
</a>
</li>
);
}
interface SelectAddressButtonProps {
buttonDisabled: boolean;
redirectFunc: () => void;
}
const SelectAddressButton = ({
buttonDisabled,
redirectFunc,
}: SelectAddressButtonProps) => {
return (
<button
type="button"
disabled={buttonDisabled}
onClick={redirectFunc}
className="focus:shadow-outline mt-3 rounded bg-brandtan px-4 py-2 font-bold text-white shadow hover:bg-hovertan focus:outline-none disabled:opacity-25 disabled:hover:bg-brandtan"
>
Select Address
</button>
);
};
export default function Search() {
const [postcode, setPostcode] = useState("");
const [buttonDisabled, setButtonDisabled] = useState(true);