Switch to version 1: remove src/app/matches/[id]/page.tsx
This commit is contained in:
@@ -1,220 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import React from 'react';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
interface GoalScorer {
|
||||
name: string;
|
||||
minute: number;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
homeTeam: string;
|
||||
awayTeam: string;
|
||||
homeScore: number;
|
||||
awayScore: number;
|
||||
date: string;
|
||||
venue: string;
|
||||
tournamentStage: string;
|
||||
goalScorers: GoalScorer[];
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
|
||||
const dummyMatchData: Record<string, Match> = {
|
||||
"match-1": {
|
||||
id: "match-1", homeTeam: "Argentina", awayTeam: "France", homeScore: 3,
|
||||
awayScore: 3,
|
||||
date: "December 18, 2022", venue: "Lusail Stadium, Qatar", tournamentStage: "2022 Final", goalScorers: [
|
||||
{ name: "Lionel Messi (ARG)", minute: 23 },
|
||||
{ name: "Ángel Di María (ARG)", minute: 36 },
|
||||
{ name: "Kylian Mbappé (FRA)", minute: 80 },
|
||||
{ name: "Kylian Mbappé (FRA)", minute: 81 },
|
||||
{ name: "Lionel Messi (ARG)", minute: 108 },
|
||||
{ name: "Kylian Mbappé (FRA)", minute: 118 },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spain-vs-switzerland_187299-31172.jpg?_wi=2", imageAlt: "Argentina vs France World Cup Final 2022"
|
||||
},
|
||||
"match-2": {
|
||||
id: "match-2", homeTeam: "Brazil", awayTeam: "Germany", homeScore: 1,
|
||||
awayScore: 7,
|
||||
date: "July 8, 2014", venue: "Estádio Mineirão, Brazil", tournamentStage: "2014 Semi-final", goalScorers: [
|
||||
{ name: "Thomas Müller (GER)", minute: 11 },
|
||||
{ name: "Miroslav Klose (GER)", minute: 23 },
|
||||
{ name: "Toni Kroos (GER)", minute: 24 },
|
||||
{ name: "Toni Kroos (GER)", minute: 26 },
|
||||
{ name: "Sami Khedira (GER)", minute: 29 },
|
||||
{ name: "André Schürrle (GER)", minute: 69 },
|
||||
{ name: "André Schürrle (GER)", minute: 79 },
|
||||
{ name: "Oscar (BRA)", minute: 90 },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ghana-vs-croatia-football_187299-32095.jpg?_wi=2", imageAlt: "Brazil vs Germany World Cup Semi-final 2014"
|
||||
},
|
||||
"match-3": {
|
||||
id: "match-3", homeTeam: "Italy", awayTeam: "Brazil", homeScore: 0,
|
||||
awayScore: 0,
|
||||
date: "July 17, 1994", venue: "Rose Bowl, USA", tournamentStage: "1994 Final", goalScorers: [], // No goals in regular/extra time
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536180.jpg?_wi=2", imageAlt: "Italy vs Brazil World Cup Final 1994"
|
||||
},
|
||||
"match-4": {
|
||||
id: "match-4", homeTeam: "England", awayTeam: "Germany", homeScore: 1,
|
||||
awayScore: 4,
|
||||
date: "June 27, 2010", venue: "Free State Stadium, South Africa", tournamentStage: "2010 Round of 16", goalScorers: [
|
||||
{ name: "Miroslav Klose (GER)", minute: 20 },
|
||||
{ name: "Lukas Podolski (GER)", minute: 32 },
|
||||
{ name: "Matthew Upson (ENG)", minute: 37 },
|
||||
{ name: "Thomas Müller (GER)", minute: 67 },
|
||||
{ name: "Thomas Müller (GER)", minute: 70 },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/men-playing-rugby-field_23-2150062039.jpg?_wi=2", imageAlt: "England vs Germany World Cup 2010"
|
||||
},
|
||||
"match-5": {
|
||||
id: "match-5", homeTeam: "Spain", awayTeam: "Netherlands", homeScore: 1,
|
||||
awayScore: 0,
|
||||
date: "July 11, 2010", venue: "Soccer City, South Africa", tournamentStage: "2010 Final", goalScorers: [
|
||||
{ name: "Andrés Iniesta (ESP)", minute: 116 },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg?_wi=2", imageAlt: "Spain vs Netherlands World Cup Final 2010"
|
||||
},
|
||||
"match-6": {
|
||||
id: "match-6", homeTeam: "USA", awayTeam: "Mexico", homeScore: 2,
|
||||
awayScore: 0,
|
||||
date: "June 17, 2002", venue: "Jeonju World Cup Stadium, South Korea", tournamentStage: "2002 Round of 16", goalScorers: [
|
||||
{ name: "Brian McBride (USA)", minute: 8 },
|
||||
{ name: "Landon Donovan (USA)", minute: 65 },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/morocco-vs-united-states-football_187299-32225.jpg?_wi=2", imageAlt: "USA vs Mexico World Cup 2002"
|
||||
},
|
||||
};
|
||||
|
||||
export default function MatchDetailPage() {
|
||||
const params = useParams();
|
||||
const matchId = params.id as string;
|
||||
const match = dummyMatchData[matchId];
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Matches", id: "/" }, // Link back to home page's matches section
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Stats", id: "#stats" },
|
||||
{ name: "Fans Say", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
|
||||
logoAlt="World Cup Hub Logo"
|
||||
brandName="World Cup Hub"
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center min-h-screen text-center p-8">
|
||||
<h1 className="text-4xl font-bold mb-4">Match Not Found</h1>
|
||||
<p className="text-lg">The match you are looking for does not exist.</p>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
logoText="World Cup Hub"
|
||||
columns={[
|
||||
{ title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
|
||||
{ title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
|
||||
]}
|
||||
copyrightText="© 2024 World Cup Hub. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Matches", id: "/" }, // Link back to home page's matches section
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Stats", id: "#stats" },
|
||||
{ name: "Fans Say", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
|
||||
logoAlt="World Cup Hub Logo"
|
||||
brandName="World Cup Hub"
|
||||
/>
|
||||
<div className="min-h-screen pt-24 pb-12 flex flex-col items-center justify-center bg-background text-foreground">
|
||||
<div className="container max-w-4xl mx-auto px-4">
|
||||
<h1 className="text-5xl font-extrabold text-center mb-8 leading-tight">
|
||||
<span className="text-primary-cta">Match Details:</span> {match.homeTeam} vs {match.awayTeam}
|
||||
</h1>
|
||||
<img src={match.imageSrc} alt={match.imageAlt} className="w-full h-80 object-cover rounded-xl shadow-lg mb-8" />
|
||||
|
||||
<div className="bg-card p-8 rounded-xl shadow-md text-center mb-8 border border-border">
|
||||
<p className="text-xl font-semibold mb-2">{match.tournamentStage}</p>
|
||||
<p className="text-lg mb-4">{match.date} at {match.venue}</p>
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
<span className="text-4xl font-bold">{match.homeTeam}</span>
|
||||
<span className="text-6xl font-extrabold text-primary-cta">{match.homeScore} - {match.awayScore}</span>
|
||||
<span className="text-4xl font-bold">{match.awayTeam}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{match.goalScorers.length > 0 && (
|
||||
<div className="bg-card p-8 rounded-xl shadow-md border border-border">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">Goal Scorers</h2>
|
||||
<ul className="space-y-4">
|
||||
{match.goalScorers.map((scorer, index) => (
|
||||
<li key={index} className="flex items-center justify-between bg-background-accent p-4 rounded-lg shadow-sm">
|
||||
<span className="text-lg font-medium">{scorer.name}</span>
|
||||
<span className="text-primary-cta font-semibold">{scorer.minute}'</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{match.goalScorers.length === 0 && (
|
||||
<div className="bg-card p-8 rounded-xl shadow-md border border-border text-center">
|
||||
<h2 className="text-2xl font-bold mb-4">No Goals Scored in Regular Time</h2>
|
||||
<p className="text-lg">This match was decided by other means (e.g., penalty shootout).</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
logoText="World Cup Hub"
|
||||
columns={[
|
||||
{ title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
|
||||
{ title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
|
||||
]}
|
||||
copyrightText="© 2024 World Cup Hub. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user