feat : dd up up

components/public/structured-guide.tsx

@@ -2,11 +2,11 @@ import Image from "@/components/ui/resilient-image";
 import localFont from "next/font/local";
 import Link from "next/link";
 import { ArrowLeftIcon, ArrowUpRightIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ComparisonContext, ComparisonValue } from "@/components/public/comparison-context";
+import { ComparisonContext } from "@/components/public/comparison-context";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -76,10 +76,10 @@ export function publicSections(guide: PublicGuide) {
 }
 
 function publicSectionTitle(slug: string, fallback: string): string {
-  if (slug === "weapon") return "อาวุธ";
-  if (slug === "artifact") return "อาร์ติแฟกต์และค่าสถานะ";
-  if (slug === "constellations") return "กลุ่มดาว";
-  if (slug === "team") return "ทีมแนะนำและดาเมจ";
+  if (slug === "weapon") return "Weapons";
+  if (slug === "artifact") return "Artifacts";
+  if (slug === "constellations") return "Constellations";
+  if (slug === "team") return "Team calc";
   return fallback;
 }
 
@@ -96,7 +96,7 @@ export function StructuredGuideShell({
   const baseHref = preview ? `/admin/${guide.characterKey}/preview` : `/${guide.slug}`;
   const currentPageTitle = section
     ? publicSectionTitle(section, sections.find((item) => item.slug === section)?.title ?? section)
-    : "ภาพรวม";
+    : "Overview";
   return (
     <div className="flex min-h-svh flex-col bg-background">
       <LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
@@ -156,7 +156,7 @@ export function StructuredGuideShell({
               height={20}
               className="size-5 object-contain"
             />
-            ภาพรวม
+            Overview
           </Link>
           {sections.map((item) => (
             <Link
@@ -574,7 +574,7 @@ function WeaponSectionContent({
                       )}
                     >
                       {Number(row.overallPercent) === 0
-                        ? (exporting ? "-%" : "—")
+                        ? (exporting ? "-%" : "-")
                         : metric(row.overallPercent)}
                     </p>
                     <p
@@ -589,7 +589,6 @@ function WeaponSectionContent({
                     >
                       ดาเมจทั้งทีม
                     </p>
-                    {!exporting && <ComparisonValue value={row.overallPercent} />}
                   </div>
                 ) : null}
                 {row.personalPercent ? (
@@ -606,7 +605,7 @@ function WeaponSectionContent({
                       )}
                     >
                       {Number(row.personalPercent) === 0
-                        ? (exporting ? "-%" : "—")
+                        ? (exporting ? "-%" : "-")
                         : metric(row.personalPercent)}
                     </p>
                     <p
@@ -621,7 +620,6 @@ function WeaponSectionContent({
                     >
                       ดาเมจส่วนตัว
                     </p>
-                    {!exporting && <ComparisonValue value={row.personalPercent} />}
                   </div>
                 ) : null}
               </div>
@@ -777,12 +775,16 @@ function ArtifactSectionContent({
           )}
           <div data-artifact-export-section="tierlist" className={exporting ? "order-first" : "lg:order-first"}>
             {(() => {
+              const TierList = exporting ? Fragment : Card;
+              const TierGroup = exporting ? Card : Fragment;
               const tierCards = guide.artifactGroups.map((condition, conditionIndex) => (
               <div key={condition.id} data-tier-condition={conditionIndex} className="artifact-export-tierlist flex flex-col gap-5">
               {!exporting && <ComparisonContext />}
               {exporting && guide.artifactGroups.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
               {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
-              {condition.tiers.map((group) => <Card key={group.id}>
+              <TierList>
+              {condition.tiers.map((group, groupIndex) => <TierGroup key={group.id}>
+                {!exporting && groupIndex > 0 ? <Separator /> : null}
                 <CardHeader>
                   <CardTitle>
                     {group.name === "Late Game"
@@ -823,14 +825,14 @@ function ArtifactSectionContent({
                       </div>
                       <div className="w-24 shrink-0 text-right sm:w-28">
                         <p className="text-2xl font-semibold text-primary">
-                          {Number(row.percent) === 0 ? (exporting ? "-%" : "—") : metric(row.percent, exporting ? "en-US" : undefined)}
+                          {Number(row.percent) === 0 ? (exporting ? "-%" : "-") : metric(row.percent, exporting ? "en-US" : undefined)}
                         </p>
-                        {!exporting && <ComparisonValue value={row.percent} />}
                       </div>
                     </div>
                   ))}
                 </CardContent>
-              </Card>)}
+              </TierGroup>)}
+              </TierList>
               </div>
               ));
               return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.artifactGroups.map((condition) => condition.iconUrl)}>{tierCards}</ConditionSwitcher>;
@@ -1203,7 +1205,6 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
           </p>
         ) : null}
       </header>
-      <p className="text-sm text-muted-foreground">ดาเมจทั้งทีมสะสมเทียบกับ C0 = 100% เช่น 117% คือสูงกว่า C0 17% ภายใต้เงื่อนไขเดียวกัน</p>
       <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">
@@ -1245,9 +1246,8 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
                         row.isGreat && "text-warning",
                       )}
                     >
-                      {Number(row.cumulativePercent) === 0 ? "—" : metric(row.cumulativePercent)}
+                      {Number(row.cumulativePercent) === 0 ? "-" : metric(row.cumulativePercent)}
                     </CardTitle>
-                    <ComparisonValue value={row.cumulativePercent} />
                     <CardDescription className="text-base font-medium text-white">
                       C{row.level} - {row.name}
                     </CardDescription>
@@ -1271,9 +1271,16 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
 function TeamSection({ guide }: { guide: PublicGuide }) {
   return (
     <section className="flex flex-col gap-6">
-      <header className="text-center">
-        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">ทีมแนะนำและดาเมจ</h1>
-        <p className="mt-3 text-sm text-muted-foreground">ผลคำนวณสำหรับทีม อาวุธ กลุ่มดาว และเงื่อนไขที่ระบุในไกด์ เลือกดูและเปรียบเทียบทีมที่มีอยู่ได้</p>
+      <header className="flex items-center justify-center gap-3">
+          <Image
+            src="/icon/nav/Team-calc.webp"
+            alt=""
+            width={56}
+            height={56}
+            loading="lazy"
+            className="size-14 shrink-0 object-contain"
+          />
+        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">ทีมและดาเมจ</h1>
       </header>
       <TeamSearch groups={guide.teamGroups} />
     </section>