diff --git a/src/app/addresses/api.tsx b/src/app/addresses/api.tsx
new file mode 100644
index 0000000..e25df57
--- /dev/null
+++ b/src/app/addresses/api.tsx
@@ -0,0 +1,22 @@
+"use server";
+
+import type { SearchData } from "./types";
+
+export async function fetchAddresses(postcode: string) {
+ let url: string;
+ url = `https://epc.opendatacommunities.org/api/v1/domestic/search?postcode=${postcode}&size=1000`;
+
+ const headers = new Headers({
+ Accept: "application/json",
+ Authorization: `Basic ${process.env.EPC_AUTH_TOKEN ?? ""}`,
+ });
+
+ const request = await fetch(url, {
+ headers: headers,
+ next: { revalidate: 60 },
+ });
+ // Explicitly assert typing of the response
+ const data = (await request.json()) as SearchData;
+
+ return data;
+}
diff --git a/src/app/addresses/page.tsx b/src/app/addresses/page.tsx
new file mode 100644
index 0000000..571fcb2
--- /dev/null
+++ b/src/app/addresses/page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { ReactElement } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import type { SearchData, SearchResult } from "./types";
+import SubmitButton from "../components/search/SubmitButton";
+import { fetchAddresses } from "./api";
+
+interface ToggleAddressButtonProps {
+ rowKey: string;
+ setButtonDisabled: (value: boolean) => void;
+ setAddress: (value: string) => void;
+ setCurrentlyToggled: (value: string) => void;
+ toggleClassName: string;
+ address: string;
+}
+
+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";
+
+const toggledButtonClass =
+ "text-white mb-1 block max-w-sm rounded-lg border border-gray-200 bg-purple-500 p-6 shadow hover:bg-purple-500 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
+
+const ToggleAddressButton = ({
+ rowKey,
+ setButtonDisabled,
+ setAddress,
+ setCurrentlyToggled,
+ toggleClassName,
+ address,
+}: ToggleAddressButtonProps) => {
+ const handleOnClick = () => {
+ setCurrentlyToggled(rowKey);
+ setAddress(address);
+ setButtonDisabled(false);
+ };
+
+ return (
+
+
+ {address}
+
+
+ );
+};
+
+export default async function Addresses() {
+ const searchParams = useSearchParams();
+ // console.log("HELLo");
+ // console.log(searchParams);
+
+ // const postcode = searchParams.get("postcode") ?? "";
+
+ // const addresses = await fetchAddresses(postcode);
+
+ // function redirectToEpc() {
+ // const res = data.rows.find(
+ // (row: SearchResult) => row["lmk-key"] === currentlyToggled
+ // );
+
+ // // router
+ // // .push({
+ // // pathname: "/epc",
+ // // query: {
+ // // address: address,
+ // // res: encodeURIComponent(JSON.stringify(res)),
+ // // },
+ // // })
+ // // .catch((error) => console.log(error));
+ // }
+
+ function buttonDisabled() {
+ return true;
+ }
+ function redirectToEpc() {
+ return;
+ }
+
+ return (
+ <>
+
+
Select your address
+
+ {/*
*/}
+