682 lines
28 KiB
TypeScript
682 lines
28 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ChevronLeftIcon, DownloadIcon } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Kbd } from "@/components/ui/kbd";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { SiteHeader } from "@/components/public/site-header";
|
|
import { ScrollableNav } from "@/components/public/scrollable-nav";
|
|
import { ElementIcon } from "@/components/public/element-icon";
|
|
import { LiveRefresh } from "@/components/live-refresh";
|
|
import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
|
|
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
|
|
import type { PublicGuide } from "@/lib/guides/queries";
|
|
import { navigationIconPath } from "@/lib/navigation";
|
|
import { normalizeTargetStat, statPriorityColorClass, targetStatIconName } from "@/lib/guides/stats";
|
|
import { normalizeTalentPriorities, talentRelationSymbol } from "@/lib/guides/talents";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function hasSection(guide: PublicGuide, slug: string): boolean {
|
|
if (slug === "weapon") return guide.weapons.length > 0;
|
|
if (slug === "artifact")
|
|
return (
|
|
guide.artifactGroups.some((group) => group.rows.length > 0) ||
|
|
Boolean(
|
|
guide.artifactProfile &&
|
|
(guide.artifactProfile.sands.length ||
|
|
guide.artifactProfile.goblet.length ||
|
|
guide.artifactProfile.circlet.length),
|
|
)
|
|
);
|
|
if (slug === "constellations") return guide.constellations.length > 0;
|
|
if (slug === "team") return guide.teams.length > 0;
|
|
return guide.extras.some(
|
|
(extra) => extra.slug === slug && extra.rows.length > 0,
|
|
);
|
|
}
|
|
|
|
export function publicSections(guide: PublicGuide) {
|
|
return guide.sections.filter((section) => hasSection(guide, section.slug));
|
|
}
|
|
|
|
export function StructuredGuideShell({
|
|
guide,
|
|
section,
|
|
}: {
|
|
guide: PublicGuide;
|
|
section?: string;
|
|
}) {
|
|
const sections = publicSections(guide);
|
|
return (
|
|
<div className="min-h-svh bg-background">
|
|
<LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
|
|
<SiteHeader />
|
|
<div className="sticky top-0 z-10 border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
|
|
<div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6">
|
|
<Link
|
|
href="/"
|
|
aria-label="กลับหน้ารวม"
|
|
className="grid size-10 place-items-center rounded-lg hover:bg-muted"
|
|
>
|
|
<ChevronLeftIcon />
|
|
</Link>
|
|
<div className={cn("relative size-11 overflow-hidden rounded-lg border", rarityGradientClass(guide.character.rarity))}>
|
|
<Image
|
|
src={guide.character.imageUrl}
|
|
alt={guide.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col items-start gap-1">
|
|
<p className="truncate font-heading font-semibold">{guide.name}</p>
|
|
{guide.character.element ? (
|
|
<Badge variant="secondary">
|
|
{guide.character.elementIconUrl ? (
|
|
<ElementIcon element={guide.character.element} url={guide.character.elementIconUrl} />
|
|
) : null}
|
|
{guide.character.element}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<ScrollableNav
|
|
ariaLabel={`เมนูคู่มือ ${guide.name}`}
|
|
className="mx-auto min-h-11 w-full max-w-7xl px-4 sm:px-6"
|
|
>
|
|
<Link
|
|
href={`/${guide.slug}`}
|
|
className={cn(
|
|
"flex shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
|
|
!section && "bg-muted text-foreground",
|
|
)}
|
|
>
|
|
Overview
|
|
</Link>
|
|
{sections.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/${guide.slug}/${item.slug}`}
|
|
className={cn(
|
|
"flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
|
|
section === item.slug && "bg-muted text-foreground",
|
|
)}
|
|
>
|
|
{navigationIconPath(item.slug) ? <Image src={navigationIconPath(item.slug)!} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
|
|
{item.title}
|
|
</Link>
|
|
))}
|
|
</ScrollableNav>
|
|
</div>
|
|
<main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
|
|
{section ? (
|
|
<GuideSection guide={guide} section={section} />
|
|
) : (
|
|
<GuideOverview guide={guide} sections={sections} />
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideOverview({
|
|
guide,
|
|
sections,
|
|
}: {
|
|
guide: PublicGuide;
|
|
sections: ReturnType<typeof publicSections>;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="relative mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-xl border bg-muted">
|
|
<Image
|
|
src={guide.coverUrl}
|
|
alt={`Guide ${guide.name}`}
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
|
|
<p className="text-sm font-medium text-primary">Build Overview</p>
|
|
<h1 className="font-heading text-4xl font-semibold">{guide.name}</h1>
|
|
<p className="text-lg leading-8 text-muted-foreground">
|
|
{guide.overview}
|
|
</p>
|
|
</div>
|
|
{sections.length ? (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{sections.map((item) => (
|
|
<Link key={item.id} href={`/${guide.slug}/${item.slug}`}>
|
|
<Card className="h-full">
|
|
<CardHeader>
|
|
<CardTitle>{item.title}</CardTitle>
|
|
<CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
|
|
<CardDescription>
|
|
กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideSection({
|
|
guide,
|
|
section,
|
|
}: {
|
|
guide: PublicGuide;
|
|
section: string;
|
|
}) {
|
|
if (section === "weapon") return <WeaponSection guide={guide} />;
|
|
if (section === "artifact") return <ArtifactSection guide={guide} />;
|
|
if (section === "constellations")
|
|
return <ConstellationSection guide={guide} />;
|
|
if (section === "team") return <TeamSection guide={guide} />;
|
|
const extra = guide.extras.find((item) => item.slug === section);
|
|
return extra ? <ExtraSection extra={extra} /> : null;
|
|
}
|
|
|
|
function metric(value: string | null) {
|
|
return value === null
|
|
? null
|
|
: `${Number(value).toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
function WeaponSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="flex flex-col items-center gap-3 text-center">
|
|
<p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
|
|
<h1 className="whitespace-nowrap font-heading text-4xl font-semibold">Weapons</h1>
|
|
<a
|
|
href={`/api/guides/${guide.id}/weapons/image`}
|
|
download
|
|
className={buttonVariants({ variant: "outline", size: "sm" })}
|
|
>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
Export image
|
|
</a>
|
|
</header>
|
|
<div className="grid gap-3">
|
|
{guide.weapons.map((row, index) => (
|
|
<Card key={row.id} size="sm" className="bg-white py-0">
|
|
<CardContent className="grid p-0 md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]">
|
|
<div
|
|
className={cn(
|
|
"flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white md:rounded-br-[8rem] md:pr-16",
|
|
rarityGradientClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
<div className="relative size-20 shrink-0">
|
|
<Image
|
|
src={row.weapon.imageUrl}
|
|
alt={row.weapon.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex min-w-0 flex-col gap-1">
|
|
<p className="truncate text-base font-semibold sm:text-lg">
|
|
{index + 1}. {row.weapon.name} R{row.refinement}
|
|
</p>
|
|
{row.note ? <p className="whitespace-pre-wrap text-sm">{row.note}</p> : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-around gap-4 bg-white px-4 py-5 text-black">
|
|
{row.overallPercent ? (
|
|
<div className="flex-1 text-center">
|
|
<p
|
|
className={cn(
|
|
"whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
|
|
rarityTextClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
{metric(row.overallPercent)}
|
|
</p>
|
|
<p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
|
|
</div>
|
|
) : null}
|
|
{row.personalPercent ? (
|
|
<div className="flex-1 text-center">
|
|
<p
|
|
className={cn(
|
|
"whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
|
|
rarityTextClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
{metric(row.personalPercent)}
|
|
</p>
|
|
<p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
|
const profile = guide.artifactProfile;
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="flex flex-col items-center gap-3 text-center">
|
|
<p className="text-sm font-medium text-primary">
|
|
อาร์ติแฟกต์และสเตตัสที่แนะนำ
|
|
</p>
|
|
<h1 className="font-heading text-4xl font-semibold">
|
|
Artifacts & Stats
|
|
</h1>
|
|
<a
|
|
href={`/api/guides/${guide.id}/artifacts/image`}
|
|
download
|
|
className={buttonVariants({ variant: "outline", size: "sm" })}
|
|
>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
Export image
|
|
</a>
|
|
</header>
|
|
<div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
|
|
{" "}
|
|
<div className="flex flex-col gap-5">
|
|
{guide.artifactGroups.map((group) => (
|
|
<Card key={group.id}>
|
|
<CardHeader>
|
|
<CardTitle>{group.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-3">
|
|
{group.rows.map((row, index) => (
|
|
<div key={row.id} className="flex items-center gap-3">
|
|
<div className="flex -space-x-3">
|
|
<div
|
|
className={cn(
|
|
"relative size-14 overflow-hidden rounded-lg border",
|
|
rarityGradientClass(row.first.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={row.first.imageUrl}
|
|
alt={row.first.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
{row.second ? (
|
|
<div
|
|
className={cn(
|
|
"relative size-14 overflow-hidden rounded-lg border",
|
|
rarityGradientClass(row.second.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={row.second.imageUrl}
|
|
alt={row.second.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-medium">
|
|
{index + 1}. {row.first.name}
|
|
{row.second ? ` + ${row.second.name}` : ""}
|
|
</p>
|
|
{row.note ? <p className="whitespace-pre-wrap text-sm text-muted-foreground">{row.note}</p> : null}
|
|
</div>
|
|
<p className="text-2xl font-semibold">
|
|
{metric(row.percent)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
{profile ? (
|
|
<div className="flex flex-col gap-5">
|
|
<Card className="overflow-hidden pt-0">
|
|
<CardHeader className="bg-primary py-4 text-center text-primary-foreground">
|
|
<CardTitle className="text-2xl">Artifact Stats</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-3 p-0">
|
|
<ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
|
|
<ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
|
|
<ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
|
|
</CardContent>
|
|
</Card>
|
|
{profile.substats.length ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
|
|
<strong>Stat Priority:</strong>
|
|
<div className="flex flex-col items-center gap-1">
|
|
{profile.substats.map((stat, index) => (
|
|
<span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
|
|
{statLabel(stat)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
<Card>
|
|
<CardHeader><CardTitle>รายละเอียดเพิ่มเติม</CardTitle></CardHeader>
|
|
<CardContent className="flex flex-col gap-5">
|
|
{profile.targets.length ? (
|
|
<div>
|
|
<p className="mb-2 text-sm font-medium">Target Stats</p>
|
|
<div className="flex flex-col gap-1">
|
|
{profile.targets.map((target, index) => (
|
|
<div
|
|
key={`${target.stat}-${target.value}`}
|
|
className={cn(
|
|
"flex items-center justify-between gap-4 rounded-md px-3 py-2 text-sm",
|
|
index % 2 === 0 ? "bg-muted/60" : "bg-muted/20",
|
|
)}
|
|
>
|
|
<span className="flex min-w-0 items-center gap-2">
|
|
{targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
|
|
<span>{normalizeTargetStat(target.stat) ?? target.stat}</span>
|
|
</span>
|
|
<strong className="shrink-0">{target.value}</strong>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{profile.talents.length ? (
|
|
<div>
|
|
<p className="mb-2 text-sm font-medium">ลำดับการอัพพรสวรรค์</p>
|
|
<div className="flex items-start justify-center gap-1 sm:gap-3">
|
|
{normalizeTalentPriorities(profile.talents)
|
|
.map((talent, index, talents) => {
|
|
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
|
|
const talentName = catalogTalent?.name ?? talent.type;
|
|
return (
|
|
<div key={talent.type} className="flex min-w-0 items-start gap-1 sm:gap-3">
|
|
<div className="flex w-16 flex-col items-center gap-2 text-center sm:w-28">
|
|
<div className="relative size-14 overflow-hidden rounded-xl border bg-muted sm:size-20">
|
|
{catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt={talentName} fill className="object-contain" /> : <span className="grid size-full place-items-center font-semibold">{talent.type}</span>}
|
|
</div>
|
|
<Badge variant="secondary">{talent.level ? `Lv.${talent.level}+` : "—"}</Badge>
|
|
<p className="text-xs font-medium sm:text-sm">{talentName}</p>
|
|
</div>
|
|
{index < talents.length - 1 ? (
|
|
<span className="mt-4 text-xl font-semibold sm:mt-6 sm:text-3xl" aria-label={talent.relationToNext === "gte" ? "มากกว่าหรือเท่ากับ" : "มากกว่า"}>
|
|
{talentRelationSymbol(talent.relationToNext)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{profile.note ? (
|
|
<div className="pt-3">
|
|
<p className="mb-2 text-sm font-medium">โน็ต</p>
|
|
<p className="text-sm leading-6 text-muted-foreground">
|
|
{profile.note}
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function statLabel(value: string): string {
|
|
return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
|
|
}
|
|
|
|
function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
|
|
return (
|
|
<div className="flex min-w-0 flex-col items-center gap-3 border-r p-3 text-center last:border-r-0 sm:p-5">
|
|
<Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
|
|
<p className="font-semibold">{label}</p>
|
|
<Separator />
|
|
<div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
|
|
{values.length
|
|
? values.map((value, index) => (
|
|
<span key={`${value}-${index}`} className={cn("max-w-full break-words text-center", statPriorityColorClass(index))}>
|
|
{statLabel(value)}
|
|
</span>
|
|
))
|
|
: <span>—</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">กลุ่มดาว</p>
|
|
<h1 className="font-heading text-4xl font-semibold">Constellations</h1>
|
|
</header>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{guide.constellations.map((row) => (
|
|
<Card key={row.level}>
|
|
<CardHeader className="flex flex-row items-center gap-4">
|
|
{row.iconUrl ? (
|
|
<Image
|
|
src={row.iconUrl}
|
|
alt=""
|
|
width={64}
|
|
height={64}
|
|
className="size-16 shrink-0 rounded-lg bg-muted object-contain"
|
|
/>
|
|
) : null}
|
|
<div className="min-w-0">
|
|
<CardTitle className={cn("text-3xl text-white", row.isGreat && "text-warning")}>
|
|
{metric(row.cumulativePercent)}
|
|
</CardTitle>
|
|
<CardDescription className="text-base font-medium text-white">
|
|
C{row.level} · {row.name}
|
|
</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-line leading-7">{row.detail}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function TeamSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">คำนวณความเสียหาย</p>
|
|
<h1 className="font-heading text-4xl font-semibold">Team Calc</h1>
|
|
</header>
|
|
<div className="grid gap-5 xl:grid-cols-2">
|
|
{guide.teams.map((team) => {
|
|
const total = team.members.reduce(
|
|
(sum, member) => sum + Number(member.damage),
|
|
0,
|
|
);
|
|
const seconds = Number(team.rotationSeconds);
|
|
return (
|
|
<Card key={team.id}>
|
|
<CardHeader>
|
|
<CardTitle>{team.title}</CardTitle>
|
|
<CardDescription>{seconds}s rotation</CardDescription>
|
|
<CardAction>
|
|
<a
|
|
href={`/api/teams/${team.id}/image`}
|
|
download
|
|
className={buttonVariants({
|
|
variant: "outline",
|
|
size: "sm",
|
|
})}
|
|
>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
Export image
|
|
</a>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
{team.members.map((member) => (
|
|
<div key={member.position} className="min-w-0 text-center">
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className={cn("relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
|
|
<Image
|
|
src={member.character.imageUrl}
|
|
alt={member.character.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="col-span-1 row-span-2 flex min-w-0 flex-col gap-2">
|
|
{member.weapon ? (
|
|
<div
|
|
className={cn(
|
|
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
|
rarityGradientClass(member.weapon.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={member.weapon.imageUrl}
|
|
alt={member.weapon.name}
|
|
fill
|
|
className="object-contain p-1"
|
|
/>
|
|
<Kbd className="absolute top-0 left-0">
|
|
R{member.refinement}
|
|
</Kbd>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-square rounded-md border bg-muted" />
|
|
)}
|
|
{member.artifact ? (
|
|
<div
|
|
className={cn(
|
|
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
|
rarityGradientClass(member.artifact.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={member.artifact.imageUrl}
|
|
alt={member.artifact.name}
|
|
fill
|
|
className="object-contain p-1"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-square rounded-md border bg-muted" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 truncate text-sm font-medium">
|
|
C{member.constellation} {member.character.name}
|
|
</p>
|
|
<p className="text-sm font-semibold">
|
|
{Number(member.damage).toLocaleString(undefined, {
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{total
|
|
? ((Number(member.damage) / total) * 100).toFixed(2)
|
|
: "0.00"}
|
|
%
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Separator />
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Total damage
|
|
</p>
|
|
<p className="font-semibold">{total.toLocaleString()}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm text-muted-foreground">Total DPS</p>
|
|
<p className="text-3xl font-semibold text-primary">
|
|
{seconds > 0
|
|
? (total / seconds).toLocaleString(undefined, {
|
|
maximumFractionDigits: 0,
|
|
})
|
|
: "0"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="rounded-lg bg-muted p-3 text-sm leading-6">
|
|
{team.combo}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">Extra Guide</p>
|
|
<h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
|
|
</header>
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
{extra.rows.map((row) => (
|
|
<Card key={row.id} className="overflow-hidden py-0">
|
|
{row.imageUrl ? (
|
|
<div className="relative aspect-video bg-muted">
|
|
<Image
|
|
src={row.imageUrl}
|
|
alt={row.heading}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<CardHeader className="pt-5">
|
|
<CardTitle>{row.heading}</CardTitle>
|
|
<CardDescription>{row.body}</CardDescription>
|
|
{row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|