feat : update

components/public/condition-switcher.tsx

@@ -1,19 +1,28 @@
 "use client";
 
+import Image from "next/image";
 import { MousePointerClickIcon } from "lucide-react";
-import { Children, type ReactNode, useState } from "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");
@@ -25,13 +34,13 @@ export function ConditionSwitcher({
       <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>
+            <Fragment key={index}>
+              {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-4" /> : 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>