40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { Children, type ReactNode, useState } from "react";
|
|
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
export function ConditionSwitcher({
|
|
children,
|
|
label = "เลือก Condition",
|
|
labels,
|
|
}: {
|
|
children: ReactNode;
|
|
label?: string;
|
|
labels?: readonly string[];
|
|
}) {
|
|
const items = Children.toArray(children);
|
|
const [active, setActive] = useState("0");
|
|
|
|
if (items.length <= 1) return items[0] ?? null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
|
|
if (values[0]) setActive(values[0]);
|
|
}}>
|
|
{items.map((_, index) => (
|
|
<ToggleGroupItem
|
|
key={index}
|
|
value={String(index)}
|
|
className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
|
|
>
|
|
{labels?.[index] || `Condition ${index + 1}`}
|
|
</ToggleGroupItem>
|
|
))}
|
|
</ToggleGroup>
|
|
{items[Number(active)]}
|
|
</div>
|
|
);
|
|
}
|