42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { MousePointerClickIcon } from "lucide-react";
|
|
import { Children, type ReactNode, useState } from "react";
|
|
|
|
import { ScrollableNav } from "@/components/public/scrollable-nav";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
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 (
|
|
<Tabs className="min-w-0 gap-4" value={active} onValueChange={setActive}>
|
|
<ScrollableNav ariaLabel={label} className="w-full min-w-0">
|
|
<TabsList aria-label={label} className="mx-auto shrink-0">
|
|
{items.map((_, index) => (
|
|
<TabsTrigger
|
|
key={index}
|
|
value={String(index)}
|
|
>
|
|
<MousePointerClickIcon className="text-primary group-aria-pressed/tabs:text-primary-foreground" aria-hidden="true" data-icon="inline-start" />
|
|
{labels?.[index] || `Condition ${index + 1}`}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</ScrollableNav>
|
|
{items.map((item, index) => <TabsContent key={index} value={String(index)} className="text-base">{item}</TabsContent>)}
|
|
</Tabs>
|
|
);
|
|
}
|