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>

components/public/structured-guide.tsx

@@ -453,6 +453,7 @@ function WeaponSectionContent({
       <ConditionSwitcher
         label="เลือกเงื่อนไขอาวุธ"
         labels={weaponGroups.map((group, index) => group.name || (exporting ? `Condition ${index + 1}` : `เงื่อนไข ${index + 1}`))}
+        iconUrls={weaponGroups.map((group) => group.iconUrl)}
       >
       {weaponGroups.map((group, groupIndex, groups) => (
       <div key={group.id} className="relative z-10 flex flex-col gap-3">
@@ -756,7 +757,7 @@ function ArtifactSectionContent({
         {" "}
         <div className="artifact-export-left flex flex-col gap-5">
           {exporting ? recommendedCards : (
-            <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะแนะนำ" labels={recommendedConditions.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)}>
+            <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะแนะนำ" labels={recommendedConditions.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={recommendedConditions.map((condition) => condition.iconUrl)}>
               {recommendedCards}
             </ConditionSwitcher>
           )}
@@ -814,7 +815,7 @@ function ArtifactSectionContent({
               </Card>)}
               </div>
               ));
-              return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)}>{tierCards}</ConditionSwitcher>;
+              return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.artifactGroups.map((condition) => condition.iconUrl)}>{tierCards}</ConditionSwitcher>;
             })()}
         </div>
       </div>
@@ -863,7 +864,7 @@ function ArtifactSectionContent({
                   </div>
                     ))
                   ) : (
-                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)}>
+                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย" labels={profile.targetConditions.filter((group) => group.rows.length).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)} iconUrls={profile.targetConditions.filter((group) => group.rows.length).map((group) => group.iconUrl)}>
                       {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
                         <div key={groupIndex}>
                           <p className="mb-2 text-sm font-medium">{exportLabel(exporting, "ค่าสถานะต่ำๆที่ควรจะปั้นไว้", "Recommended Minimum Stats")}</p>
@@ -1187,7 +1188,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
           </p>
         ) : null}
       </header>
-      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)}>
+      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group) => group.iconUrl)}>
       {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
         <div key={group.id} className="flex flex-col gap-4">
           <div>

components/public/team-search.tsx

@@ -3,10 +3,11 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowUpRightIcon, MousePointerClickIcon, SearchIcon, XIcon } from "lucide-react";
-import { useMemo, useState, type ReactNode } from "react";
+import { ArrowUpRightIcon, SearchIcon, XIcon } from "lucide-react";
+import { Fragment, useMemo, useState, type ReactNode } from "react";
 
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { ConditionTabIcon } from "@/components/public/condition-switcher";
 import { ExportText } from "@/components/public/export-language";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { Button } from "@/components/ui/button";
@@ -451,7 +452,10 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
         <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
           <Tabs className="mx-auto" value={activeCondition} onValueChange={setActiveCondition}>
             <TabsList aria-label="เลือกเงื่อนไขทีม">
-              {groups.map((group, index) => <TabsTrigger key={group.id} value={String(index)}><MousePointerClickIcon aria-hidden="true" data-icon="inline-start" />{group.name || `เงื่อนไข ${index + 1}`}</TabsTrigger>)}
+              {groups.map((group, index) => <Fragment key={group.id}>
+                {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-6" /> : null}
+                <TabsTrigger value={String(index)}><ConditionTabIcon iconUrl={group.iconUrl} /><span className="text-base">{group.name || `เงื่อนไข ${index + 1}`}</span></TabsTrigger>
+              </Fragment>)}
             </TabsList>
           </Tabs>
         </ScrollableNav>