feat : updae

components/public/stygian-guide.tsx

@@ -1,6 +1,7 @@
 import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 
+import { TermDetail } from "@/components/public/term-detail";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { buttonVariants } from "@/components/ui/button";
@@ -59,6 +60,11 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
             {value.artifact ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
           </div> : null}
         </div>
+        {teamLayout && <p className="text-center text-xs font-medium wrap-anywhere">{value.name}</p>}
+        {teamLayout && hasEquipment && <TermDetail interactive label="อุปกรณ์" title={`อุปกรณ์ของ ${value.name}`} detail={[
+          value.weapon ? `อาวุธ: ${value.weapon.name}${value.refinement ? ` R${value.refinement}` : ""}` : null,
+          value.artifact ? `อาร์ติแฟกต์: ${value.artifact.name}` : null,
+        ].filter(Boolean).join("\n")} />}
         {teamLayout ? item.constellationLevel !== null || value.weapon && value.refinement ? <div className="flex justify-center gap-1">
           {item.constellationLevel !== null ? <Badge variant="secondary">C{item.constellationLevel}</Badge> : null}
           {value.weapon && value.refinement ? <Badge variant="secondary">R{value.refinement}</Badge> : null}
@@ -116,14 +122,16 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
   return (
     <Tabs defaultValue="110">
+      <p className="text-sm font-medium">เลือกระดับบอส</p>
       <TabsList aria-label="ระดับความยาก Stygian">
         {stygianLevels.map((level) => (
-          <TabsTrigger key={level} value={String(level)}>เลเวล {level}</TabsTrigger>
+          <TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
         ))}
       </TabsList>
       {stygianLevels.map((level) => (
         <TabsContent key={level} value={String(level)}>
           <Tabs defaultValue="0">
+            <p className="text-sm font-medium">เลือกบอส</p>
             <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
               {stygianBossPositions.map((position) => {
                 const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);