92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import { MATCH } from "@/lib/mockData";
|
|
import { kickoffDisplay } from "@/lib/format";
|
|
import BallIcon from "./BallIcon";
|
|
|
|
export default function MatchupHUD() {
|
|
const { group, roundLabel } = MATCH;
|
|
return (
|
|
<section className="mt-6">
|
|
{/* Match 01 → Final 진행 */}
|
|
<div className="mb-3 flex items-center gap-2 text-[11px] font-semibold">
|
|
<span className="rounded-md border border-[var(--green)] px-2.5 py-1 text-[var(--green)]">
|
|
{roundLabel}
|
|
</span>
|
|
<div className="relative h-px flex-1 bg-gradient-to-r from-[var(--green)] to-[var(--line-d)]">
|
|
<span className="absolute -left-0.5 top-1/2 -translate-y-1/2 text-[var(--green)]">
|
|
◀
|
|
</span>
|
|
<span className="absolute -right-0.5 top-1/2 -translate-y-1/2 text-[var(--line-d)]">
|
|
▶
|
|
</span>
|
|
</div>
|
|
<span className="rounded-md border border-[var(--line-d)] px-2.5 py-1 text-[var(--ink-muted)]">
|
|
Final
|
|
</span>
|
|
</div>
|
|
|
|
{/* 대결 카드 (녹색 글로우 보더) */}
|
|
<div
|
|
className="rounded-3xl border-2 border-[var(--green)] bg-[#171b21] p-5"
|
|
style={{ boxShadow: "0 0 28px rgba(62,224,138,0.35), inset 0 0 24px rgba(62,224,138,0.06)" }}
|
|
>
|
|
{/* 헤더: 축구공 아이콘 + 타이틀 + 일시 */}
|
|
<div className="flex items-center gap-3">
|
|
<BallIcon className="h-14 w-14 shrink-0" />
|
|
<div className="min-w-0">
|
|
<div className="text-[22px] font-extrabold leading-tight">
|
|
{MATCH.teamA.name}{" "}
|
|
<span className="text-white/55">vs</span> {MATCH.teamB.name}
|
|
</div>
|
|
<div className="mt-1 text-[15px] font-bold text-[var(--green)]">
|
|
{kickoffDisplay(MATCH.kickoffKst)} · Group {group}
|
|
</div>
|
|
<div className="mt-0.5 text-[12px] text-white/65">{MATCH.venue}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 국기 + 라이트닝 VS */}
|
|
<div className="mt-5 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
|
|
<KorFlag />
|
|
<div className="relative grid place-items-center">
|
|
<div className="vs-glow absolute h-28 w-28" />
|
|
<span
|
|
className="relative font-impact text-[46px] italic leading-none text-[var(--green)]"
|
|
style={{ textShadow: "0 0 18px rgba(62,224,138,0.8)" }}
|
|
>
|
|
VS
|
|
</span>
|
|
</div>
|
|
<CzeFlag />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function KorFlag() {
|
|
// 실제 국기 이미지
|
|
return (
|
|
<img
|
|
src="/icons/kor.png"
|
|
alt="Korea Republic"
|
|
className="flag-img mx-auto h-[68px] w-[104px]"
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CzeFlag() {
|
|
// 체코 국기 (이미지 없음 → SVG)
|
|
return (
|
|
<svg
|
|
viewBox="0 0 6 4"
|
|
className="mx-auto h-[68px] w-[104px] rounded-lg border border-[var(--line-d)]"
|
|
preserveAspectRatio="none"
|
|
aria-label="Czechia"
|
|
>
|
|
<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>
|
|
);
|
|
}
|