Switch
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} />
}
Toggle Group (Single/Radio Selection)
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>
}
Toggle Group (Multi Selection)
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>
)
}