43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Children, type ReactNode, useState } from "react";
|
|
|
|
import { ScrollableNav } from "@/components/public/scrollable-nav";
|
|
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 min-w-0 flex-col gap-4">
|
|
<ScrollableNav ariaLabel={label} className="w-full min-w-0">
|
|
<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>
|
|
</ScrollableNav>
|
|
{items[Number(active)]}
|
|
</div>
|
|
);
|
|
}
|