import { h } from "preact"
import { useState } from "preact/hooks"
import { Switch } from "@/comps/echo/toggle"
 
export const SwitchDemo = () => {
    const [on, setOn] = useState(false)
    return <Switch checked={on} onChange={setOn} />
}

import { h, Fragment } from "preact"
import { useEffect, useState } from "preact/hooks"
import { ToggleGroup, ToggleGroupItem } from "@/comps/echo/toggle"
 
export const ToggleGroupDemo = () => {
    const [sel, setSel] = useState<string | null>("b")
    const [sel2, setSel2] = useState<string | null>("foo")
 
    return <div class="justify-center items-center flex flex-col">
        <ToggleGroup class="mb-6" value={sel} onChange={setSel}>
            <ToggleGroupItem class="" value="a">A</ToggleGroupItem>
            <ToggleGroupItem class="" value="b">B</ToggleGroupItem>
            <ToggleGroupItem class="" value="c">C</ToggleGroupItem>
        </ToggleGroup>
        <ToggleGroup value={sel2} onChange={setSel2} spacing={0} itemOnClass="bg-yellow-500">
            <ToggleGroupItem value="foo">Foo</ToggleGroupItem>
            <ToggleGroupItem value="bar">Bar</ToggleGroupItem>
            <ToggleGroupItem value="ace">Ace</ToggleGroupItem>
        </ToggleGroup>
    </div>
}

import { h } from "preact"
import { useEffect, useState } from "preact/hooks"
import { ToggleGroup, ToggleGroupItem } from "@/comps/echo/toggle/ToggleGroup"
 
export const ToggleGroupMultDemo = () => {
    const [selection, setSelection] = useState<string[]>([])
 
    return (
        <ToggleGroup multiple allowEmpty value={selection} onChange={setSelection}>
            <ToggleGroupItem value="a">A</ToggleGroupItem>
            <ToggleGroupItem value="b">B</ToggleGroupItem>
            <ToggleGroupItem value="c">C</ToggleGroupItem>
            <ToggleGroupItem value="d">D</ToggleGroupItem>
        </ToggleGroup>
    )
}