62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { formatToTaipeiTime } from '@/lib/timezone';
|
||
import { LiveMatchCenter } from '@/components/LiveMatchCenter';
|
||
|
||
const matches = [
|
||
{
|
||
id: 'm1',
|
||
teams: '德國 vs 西班牙',
|
||
kickoff: formatToTaipeiTime(new Date(Date.now() + 5 * 60 * 60 * 1000).toISOString()),
|
||
status: '即將開賽',
|
||
score: '0 - 0',
|
||
},
|
||
{
|
||
id: 'm2',
|
||
teams: '巴西 vs 法國',
|
||
kickoff: formatToTaipeiTime(new Date(Date.now() + 11 * 60 * 60 * 1000).toISOString()),
|
||
status: '臨場 64’',
|
||
score: '1 - 1',
|
||
},
|
||
];
|
||
|
||
export default function MatchesPage() {
|
||
const liveTimeline = [
|
||
{ minute: 18, label: '美國獲得角球攻擊機會，進入危險區' },
|
||
{ minute: 31, label: '荷蘭主隊黃牌增加，犯規次數上升' },
|
||
{ minute: 64, label: '德國先發邊鋒進球' },
|
||
];
|
||
|
||
const xgData = [
|
||
{ minute: 15, xgHome: 0.12, xgAway: 0.08 },
|
||
{ minute: 30, xgHome: 0.25, xgAway: 0.12 },
|
||
{ minute: 45, xgHome: 0.40, xgAway: 0.22 },
|
||
{ minute: 70, xgHome: 0.65, xgAway: 0.30 },
|
||
{ minute: 90, xgHome: 0.90, xgAway: 0.40 },
|
||
];
|
||
|
||
const zones = [
|
||
{ zone: '後場三分之一', pct: 24 },
|
||
{ zone: '中場控制區', pct: 44 },
|
||
{ zone: '禁區附近', pct: 32 },
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<h2 className="dot-matrix text-2xl text-[#7d2a15]">賽事中心</h2>
|
||
<section className="grid gap-4">
|
||
{matches.map((match) => (
|
||
<article key={match.id} className="panel-glow rounded-2xl p-5">
|
||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||
<p className="text-lg font-semibold text-[#6b3f2d]">{match.teams}</p>
|
||
<p className="text-sm text-[#8a6b58]">開賽：{match.kickoff}</p>
|
||
</div>
|
||
<p className="mt-3 text-sm text-[#8a6b58]">即時狀態：{match.status}</p>
|
||
<p className="text-sm text-[#7c5340]">臨場比分：{match.score}</p>
|
||
</article>
|
||
))}
|
||
</section>
|
||
|
||
<LiveMatchCenter timeline={liveTimeline} xgSeries={xgData} heatZones={zones} />
|
||
</div>
|
||
);
|
||
}
|