92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import Image from "next/image";
|
|
|
|
import { GuideExportBranding } from "@/components/public/guide-export-branding";
|
|
import type { PublicGuide } from "@/lib/guides/queries";
|
|
import { constellationChartRows } from "@/lib/guides/export-image";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function percentage(value: number): string {
|
|
return `${value.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
export function ConstellationImage({
|
|
guide,
|
|
group,
|
|
}: {
|
|
guide: PublicGuide;
|
|
group: PublicGuide["constellationGroups"][number];
|
|
}) {
|
|
const rows = constellationChartRows(group.rows);
|
|
const background = guide.character.splashImageUrl ?? guide.coverUrl;
|
|
const footer = group.note;
|
|
|
|
return (
|
|
<div className="relative isolate size-[1500px] overflow-hidden bg-[#070b20] font-heading text-white">
|
|
<GuideExportBranding backgroundUrl={background} variant="constellation" />
|
|
|
|
<div className="absolute inset-x-20 top-7 z-10 flex items-start justify-center gap-5">
|
|
<Image
|
|
src="/icon/nav/Constellations.webp"
|
|
alt=""
|
|
width={112}
|
|
height={112}
|
|
loading="eager"
|
|
className="size-28 shrink-0 object-contain drop-shadow-[0_5px_4px_rgba(0,0,0,0.8)]"
|
|
/>
|
|
<div className="flex flex-col items-center text-center drop-shadow-[0_5px_4px_rgba(0,0,0,0.8)]">
|
|
<h2
|
|
className={cn(
|
|
"whitespace-nowrap leading-none font-bold",
|
|
guide.character.name.length > 16
|
|
? "text-[60px]"
|
|
: "text-[76px]",
|
|
)}
|
|
>
|
|
{guide.character.name} Constellations
|
|
</h2>
|
|
<p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
|
|
Team Damage
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-[160px] bottom-[115px] left-[154px] z-20 w-1 bg-black/90" />
|
|
<div className="absolute inset-x-14 top-[205px] bottom-[145px] z-20 flex flex-col justify-between">
|
|
{rows.map((row) => (
|
|
<div
|
|
key={row.level}
|
|
className="grid grid-cols-[82px_1fr] items-center gap-4"
|
|
>
|
|
<div className="text-right text-[58px] leading-none font-bold drop-shadow-[0_5px_4px_rgba(0,0,0,0.9)]">
|
|
C{row.level}
|
|
</div>
|
|
<div className="flex h-[100px] items-center">
|
|
<div
|
|
className={cn(
|
|
"h-full shrink-0 rounded-r-xl",
|
|
row.isGreat ? "bg-warning" : "bg-white",
|
|
)}
|
|
style={{ width: `${row.widthPercent * 8.5}px` }}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"ml-3 text-[42px] leading-none font-bold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]",
|
|
row.isGreat ? "text-[#f0c76a]" : "text-[#f1badd]",
|
|
)}
|
|
>
|
|
{percentage(row.percent)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{footer ? (
|
|
<p className="absolute bottom-10 left-[154px] z-30 max-w-[1000px] truncate text-[28px] font-semibold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
|
|
{footer}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|