Select Component
import { h } from "preact"
import { Select } from "@/comps/echo/dropdown"
import { useState } from "onejs-preact/hooks"
export function SelectDemo() {
const [weapon, setWeapon] = useState("sword")
return <div class="w-[300px] h-[100px] flex">
<Select
value={weapon}
onChange={setWeapon}
options={[
{ value: "sword", label: "Sword" },
{ value: "bow", label: "Bow" },
{ value: "staff", label: "Magic Staff" },
]}
/>
</div>
}
Menu Dropdown
import { h } from "preact"
import { Dropdown, DropdownItem } from "@/comps/echo/dropdown"
const saveGame = () => console.log("Game saved!")
const loadGame = () => console.log("Game loaded!")
const quitGame = () => console.log("Game quit!")
export function DropdownDemo() {
return <div class="w-[300px] h-[100px] flex">
<Dropdown trigger={() => <button class="px-4 py-2 bold">Actions ▾</button>} menuClass="mt-[4px]">
<DropdownItem onSelect={() => saveGame()}>Save</DropdownItem>
<DropdownItem onSelect={() => loadGame()}>Load</DropdownItem>
<DropdownItem onSelect={() => quitGame()}>Quit</DropdownItem>
</Dropdown>
</div>
}