48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type { Team } from "@/lib/types";
|
|
|
|
// 모든 경기에 일반화된 국기 렌더.
|
|
// KOR = 실제 png 자산, CZE = 인라인 SVG(비율 보존), 그 외 = 이모지(컨테이너 높이에 비례, 안 잘림).
|
|
export default function TeamFlag({
|
|
team,
|
|
className = "",
|
|
}: {
|
|
team: Team;
|
|
className?: string;
|
|
}) {
|
|
if (team.code === "KOR") {
|
|
return (
|
|
<img
|
|
src="/icons/kor.png"
|
|
alt={team.name}
|
|
className={`flag-img object-cover ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
if (team.code === "CZE") {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 6 4"
|
|
className={`border border-[var(--line-d)] ${className}`}
|
|
preserveAspectRatio="xMidYMid meet"
|
|
aria-label={team.name}
|
|
>
|
|
<rect width="6" height="2" y="0" fill="#ffffff" />
|
|
<rect width="6" height="2" y="2" fill="#d7141a" />
|
|
<polygon points="0,0 3,2 0,4" fill="#11457e" />
|
|
</svg>
|
|
);
|
|
}
|
|
// 그 외 국가 — 이모지 국기. 컨테이너 높이(cqh) 기준으로 크기를 잡아 잘림/찌그러짐 방지.
|
|
return (
|
|
<span
|
|
className={`grid place-items-center overflow-hidden border border-[var(--line-d)] bg-white/[0.06] ${className}`}
|
|
style={{ containerType: "size" }}
|
|
aria-label={team.name}
|
|
>
|
|
<span className="leading-none" style={{ fontSize: "92cqh" }}>
|
|
{team.flag}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|