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

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