39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { rankNumberFont } from "@/lib/fonts";
|
|
|
|
export function RankNumber({ rank, className = "text-[28px] leading-7" }: { rank?: number; className?: string }) {
|
|
if (rank === undefined) return null;
|
|
|
|
return (
|
|
<span
|
|
data-component="rank-number"
|
|
className={`${rankNumberFont.className} shrink-0 font-extrabold text-[#F12B9E] italic tabular-nums ${className}`}
|
|
>
|
|
{String(rank).padStart(2, "0")}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const rankBadgeBgs = [
|
|
"/images/rank_num1.png",
|
|
"/images/rank_num2.png",
|
|
"/images/rank_num3.png",
|
|
] as const;
|
|
const rankBadgeFallback = "/images/rank_num4.png";
|
|
|
|
export function CoverRankBadge({ rank, className = "" }: { rank?: number; className?: string }) {
|
|
if (rank === undefined) return null;
|
|
|
|
const bg = rankBadgeBgs[rank - 1] ?? rankBadgeFallback;
|
|
const textClass = rank <= 1 ? "text-xl leading-7 font-medium" : "text-lg leading-6 font-semibold";
|
|
|
|
return (
|
|
<span
|
|
data-component="cover-rank-badge"
|
|
className={`absolute bottom-0 left-0 flex h-[42px] w-[54px] items-center justify-center bg-left-bottom bg-no-repeat text-white tabular-nums ${textClass} ${className}`}
|
|
style={{ backgroundImage: `url(${bg})`, backgroundSize: "100% 100%" }}
|
|
>
|
|
{rank}
|
|
</span>
|
|
);
|
|
}
|