diff --git a/src/fresh.gen.ts b/src/fresh.gen.ts
index 1d1f975e..8c454373 100644
--- a/src/fresh.gen.ts
+++ b/src/fresh.gen.ts
@@ -15,6 +15,7 @@ import * as $index from "./routes/index.tsx";
import * as $solutions_category_slug_ from "./routes/solutions/[category]/[[slug]].tsx";
import * as $solutions_category_index from "./routes/solutions/[category]/index.tsx";
import * as $Chatbot from "./islands/Chatbot.tsx";
+import * as $Checkbox from "./islands/Checkbox.tsx";
import * as $HeaderMenu from "./islands/HeaderMenu.tsx";
import * as $Selector from "./islands/Selector.tsx";
import { type Manifest } from "$fresh/server.ts";
@@ -36,6 +37,7 @@ const manifest = {
},
islands: {
"./islands/Chatbot.tsx": $Chatbot,
+ "./islands/Checkbox.tsx": $Checkbox,
"./islands/HeaderMenu.tsx": $HeaderMenu,
"./islands/Selector.tsx": $Selector,
},
diff --git a/src/islands/Chatbot.tsx b/src/islands/Chatbot.tsx
index 90887a6c..47752c72 100644
--- a/src/islands/Chatbot.tsx
+++ b/src/islands/Chatbot.tsx
@@ -1,10 +1,12 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
import { render } from "@deno/gfm";
-import { Transition } from "@headlessui/react";
+import { Button, Fieldset, Input } from "@headlessui/react";
import { useSignal, useSignalEffect } from "@preact/signals";
+import { clsx } from "clsx";
import { set } from "idb-keyval";
import type { JSX, RenderableProps } from "preact";
+import { Fragment } from "preact";
import { Suspense } from "preact/compat";
-import { useId } from "preact/hooks";
import { Loading } from "../components/Loading.tsx";
import { chat } from "../sdk/chat/index.ts";
import { getThread } from "../sdk/chat/thread.ts";
@@ -22,8 +24,8 @@ export function Chatbot(
return (
-
-
- {isOpen.value && (
- // biome-ignore lint/complexity/noUselessFragments: It's necessary.
- }>
-
-
- )}
-
+
+
+ {isOpen.value && (
+ }>
+ {/* */}
+
+ {/* */}
+
+ )}
);
}
@@ -70,7 +72,6 @@ type Db = DbItem[];
function ChatbotBox(props: JSX.HTMLAttributes): JSX.Element {
const messageValue = useSignal("");
- const inputId = useId();
const isAsking = useSignal(false);
const thread = useIndexedDB(
"thread",
@@ -104,7 +105,7 @@ function ChatbotBox(props: JSX.HTMLAttributes): JSX.Element {
{messages.value.map((msg) => (
@@ -150,25 +151,24 @@ function ChatbotBox(props: JSX.HTMLAttributes): JSX.Element {
isAsking.value = false;
}}
>
-
-
-
+
+ {
+ className="w-full whitespace-normal rounded-lg pr-10 shadow-sm dark:text-slate-950"
+ onInput={(e: JSX.TargetedInputEvent) => {
messageValue.value = (e.target as HTMLInputElement).value;
}}
/>
-
-
+
+
);
diff --git a/src/islands/Checkbox.tsx b/src/islands/Checkbox.tsx
new file mode 100644
index 00000000..1174dfa5
--- /dev/null
+++ b/src/islands/Checkbox.tsx
@@ -0,0 +1,30 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
+import { Checkbox as Checkmark, Field, Label } from "@headlessui/react";
+import type { JSX } from "preact";
+
+export interface CheckboxProps {
+ name: string;
+ labelText: string;
+ required?: boolean;
+}
+
+export function Checkbox({
+ name,
+ labelText,
+ required,
+}: CheckboxProps): JSX.Element {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/islands/HeaderMenu.tsx b/src/islands/HeaderMenu.tsx
index a7f112fe..12ed7ec5 100644
--- a/src/islands/HeaderMenu.tsx
+++ b/src/islands/HeaderMenu.tsx
@@ -1,7 +1,13 @@
-import { Popover, Transition } from "@headlessui/react";
+import {
+ Popover,
+ PopoverButton,
+ PopoverPanel,
+ Transition,
+} from "@headlessui/react";
+import { clsx } from "clsx";
import type { JSX } from "preact";
import { IconChevronDown } from "../utils/icons.ts";
-import type { Menu, MenuItem } from "../utils/site-organization.ts";
+import type { Menu } from "../utils/site-organization.ts";
import { tw } from "../utils/tailwind.ts";
/**
@@ -11,7 +17,7 @@ import { tw } from "../utils/tailwind.ts";
* @returns The text style for the menu.
*/
export function makeTextStyle(active: boolean): string {
- return tw`whitespace-nowrap py-1 hover:text-slate-700 data-[current]:font-bold dark:hover:text-slate-200 ${
+ return tw`whitespace-nowrap py-1 hover:text-slate-700 aria-[current]:font-bold dark:hover:text-slate-200 ${
active
? tw`font-bold text-slate-700 dark:text-slate-200`
: tw`text-slate-500 dark:text-slate-400`
@@ -25,7 +31,7 @@ export function makeTextStyle(active: boolean): string {
* @returns The border style for the menu.
*/
export function makeBorderStyle(active: boolean): string {
- return tw` hover:border-slate-700 data-[current]:border-b-2 dark:hover:border-slate-200 ${
+ return tw` hover:border-slate-700 aria-[current]:border-b-2 dark:hover:border-slate-200 ${
active
? tw`border-b-2 border-slate-700 dark:border-slate-200`
: tw`border-slate-500 dark:border-slate-400`
@@ -35,7 +41,7 @@ export function makeBorderStyle(active: boolean): string {
/**
* The style for the menu when it is focused.
*/
-export const prettyFocus = tw`rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-50/75`;
+export const prettyFocus = tw`rounded-sm data-[focus]:outline-none focus-visible:ring-2 focus-visible:ring-slate-50/75`;
/**
* Properties for the {@link HeaderMenu} component.
@@ -81,13 +87,18 @@ function PopoverMenu({
active,
}: Menu & WithActive): JSX.Element {
return (
-
-
-
- {title}
-
-
-
+
+
+ {title}
+
+
-
-
-
- About {title}
-
- {items.map(
- (link: MenuItem): JSX.Element => (
-
- {link.name}
-
+
+
+ {[{ href: "", name: `About ${title}` } as const, ...items].map(
+ (link): JSX.Element => (
+
),
)}
);
diff --git a/src/islands/Selector.tsx b/src/islands/Selector.tsx
index 358e9886..f9fcb3c9 100644
--- a/src/islands/Selector.tsx
+++ b/src/islands/Selector.tsx
@@ -1,7 +1,15 @@
import { IS_BROWSER } from "$fresh/runtime.ts";
-import { Combobox, Transition } from "@headlessui/react";
+import {
+ Combobox,
+ ComboboxButton,
+ ComboboxInput,
+ ComboboxOption,
+ ComboboxOptions,
+ Label,
+ Transition,
+} from "@headlessui/react";
import { useSignal } from "@preact/signals";
-import { Fragment, type JSX } from "preact";
+import type { JSX } from "preact";
import { IconCheck, IconChevronDown } from "../utils/icons.ts";
import { tw } from "../utils/tailwind.ts";
@@ -42,14 +50,16 @@ export function Selector
({
disabled={!IS_BROWSER}
value={current.value}
onChange={(newValue) => {
- current.value = newValue;
+ if (newValue) {
+ current.value = newValue;
+ }
}}
>
- {question}
+
- ) => `${state.name}`}
@@ -59,15 +69,14 @@ export function Selector({
}
}}
/>
-
+
-
+
({
query.value = "";
}}
>
-
+
{filtered.length === 0 && query.value !== "" ? (
No results found
) : (
filtered.map((item) => (
-
{({ selected, active }) => (
@@ -110,10 +119,10 @@ export function Selector({
)}
)}
-
+
))
)}
-
+
diff --git a/src/routes/calculator.tsx b/src/routes/calculator.tsx
index 1c429207..8443f480 100644
--- a/src/routes/calculator.tsx
+++ b/src/routes/calculator.tsx
@@ -1,10 +1,10 @@
-import { Head } from "$fresh/runtime.ts";
+import { Head, IS_BROWSER } from "$fresh/runtime.ts";
import type { Handlers, PageProps, RouteConfig } from "$fresh/server.ts";
+import { Button, Field, Input, Label } from "@headlessui/react";
import type { JSX } from "preact";
-import { useId } from "preact/hooks";
-import { Checkbox } from "../components/Checkbox.tsx";
import { Cover } from "../components/Cover.tsx";
import { Meta } from "../components/Meta.tsx";
+import { Checkbox } from "../islands/Checkbox.tsx";
import { Selector, type SelectorListObject } from "../islands/Selector.tsx";
import {
type GeoCostBreakdown,
@@ -204,10 +204,6 @@ function CalculatorSolarDisplay(data: CalculatorShowProps): JSX.Element {
}
function CalculatorSearch(data: CalculatorSearchProps): JSX.Element {
- const labelForHill = useId();
- const labelForRenovation = useId();
- const labelForArea = useId();
- const labelForPermit = useId();
return (
);
}