51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { MousePointerClickIcon } from "lucide-react";
|
|
import { Children, Fragment, type ReactNode, useState } from "react";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { ScrollableNav } from "@/components/public/scrollable-nav";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
export function ConditionTabIcon({ iconUrl }: { iconUrl?: string | null }) {
|
|
return iconUrl
|
|
? <Image src={iconUrl} alt="" width={32} height={32} className="size-8 shrink-0 object-contain" aria-hidden="true" data-icon="inline-start" />
|
|
: <MousePointerClickIcon className="size-5 text-primary group-aria-pressed/tabs:text-primary-foreground" aria-hidden="true" data-icon="inline-start" />;
|
|
}
|
|
|
|
export function ConditionSwitcher({
|
|
children,
|
|
label = "เลือก Condition",
|
|
labels,
|
|
iconUrls,
|
|
}: {
|
|
children: ReactNode;
|
|
label?: string;
|
|
labels?: readonly string[];
|
|
iconUrls?: readonly (string | null | undefined)[];
|
|
}) {
|
|
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) => (
|
|
<Fragment key={index}>
|
|
{index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-7" /> : null}
|
|
<TabsTrigger value={String(index)} className="outline-primary m-2">
|
|
<ConditionTabIcon iconUrl={iconUrls?.[index]} />
|
|
<span className="font-medium text-lg">{labels?.[index] || `Condition ${index + 1}`}</span>
|
|
</TabsTrigger>
|
|
</Fragment>
|
|
))}
|
|
</TabsList>
|
|
</ScrollableNav>
|
|
{items.map((item, index) => <TabsContent key={index} value={String(index)} className="text-base">{item}</TabsContent>)}
|
|
</Tabs>
|
|
);
|
|
}
|