desertthunder.dev
BlueSky & more on desktop
lazurite.stormlightlabs.org/
tauri
rust
typescript
bluesky
appview
atproto
solid
1import { For } from "solid-js";
2
3export function SegmentedControl<T extends string | number>(
4 props: { options: { value: T; label: string }[]; value: T; onChange: (value: T) => void },
5) {
6 return (
7 <div class="flex rounded-xl border p-1 ui-outline-subtle ui-input-strong">
8 <For each={props.options}>
9 {(option) => (
10 <button
11 type="button"
12 onClick={() => props.onChange(option.value)}
13 class="flex-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors"
14 classList={{
15 "bg-primary/20 text-primary": props.value === option.value,
16 "text-on-surface-variant hover:bg-surface-bright hover:text-on-surface": props.value !== option.value,
17 }}>
18 {option.label}
19 </button>
20 )}
21 </For>
22 </div>
23 );
24}