24 lines
828 B
TypeScript
24 lines
828 B
TypeScript
"use client";
|
|
|
|
import { Children, type ReactNode, useState } from "react";
|
|
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
export function ConditionSwitcher({ children, label = "เลือก Condition" }: { children: ReactNode; label?: 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)}>Condition {index + 1}</ToggleGroupItem>)}
|
|
</ToggleGroup>
|
|
{items[Number(active)]}
|
|
</div>
|
|
);
|
|
}
|