Skip to content

Added Json file to better data maintainability #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maugose wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Json file to better data maintainability #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b717c01
Added Json file to better data maintainability
maugose May 29, 2025
7755355
Added lock file
maugose May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions f1-driver-landing/components/countdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

import { useEffect, useState } from "react"
import { Clock, MapPin } from "lucide-react"
import Image from "next/image"
import { getNextRace } from "@/lib/data"

export function Countdown() {
const [timeLeft, setTimeLeft] = useState({
Expand All @@ -11,10 +13,8 @@ export function Countdown() {
seconds: 0,
})

// Example next race date - replace with actual next race date
const nextRaceDate = new Date("2025-06-15T14:00:00Z")
const nextRaceLocation = "Monaco Grand Prix"
const nextRaceCircuit = "Circuit de Monaco"
const nextRace = getNextRace()
const nextRaceDate = new Date(nextRace.date)

useEffect(() => {
const timer = setInterval(() => {
Expand All @@ -35,15 +35,20 @@ export function Countdown() {
}, 1000)

return () => clearInterval(timer)
}, [])
}, [nextRaceDate])

return (
<div className="text-center">
<div className="relative h-24 w-full mb-4 rounded-lg overflow-hidden">
<Image src={nextRace.circuitImage || "/placeholder.svg"} alt={nextRace.circuit} fill className="object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
</div>

<div className="flex items-center justify-center gap-2 mb-4 text-gray-300">
<MapPin className="h-5 w-5 text-pink-500" />
<span>{nextRaceLocation}</span>
<span>{nextRace.name}</span>
</div>
<p className="text-sm text-gray-400 mb-6">{nextRaceCircuit}</p>
<p className="text-sm text-gray-400 mb-6">{nextRace.circuit}</p>

<div className="grid grid-cols-4 gap-2 mb-6">
<div className="bg-slate-800 rounded-lg p-3">
Expand Down
17 changes: 11 additions & 6 deletions f1-driver-landing/components/hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import Image from "next/image"
import { ChevronDown } from "lucide-react"
import { getDriver } from "@/lib/data"

export function HeroSection() {
const driver = getDriver()

return (
<section className="relative h-[90vh] overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src="/placeholder.svg?height=1080&width=1920&query=formula 1 racing track with dramatic lighting"
src="/placeholder.svg?height=1080&width=1920"
alt="F1 track background"
fill
className="object-cover brightness-50"
Expand All @@ -20,22 +23,24 @@ export function HeroSection() {
<div className="max-w-3xl">
<h1 className="text-5xl md:text-7xl font-extrabold mb-4 text-white">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-blue-500">
DRIVER NAME
{driver.name}
</span>
</h1>
<p className="text-xl md:text-2xl text-gray-200 mb-8">Formula 1 Driver • Team Name • #XX</p>
<p className="text-xl md:text-2xl text-gray-200 mb-8">
Formula 1 Driver • {driver.team} • #{driver.number}
</p>
<div className="flex flex-wrap gap-4">
<div className="bg-pink-500/20 backdrop-blur-sm px-6 py-3 rounded-full border border-pink-500/30">
<p className="text-sm text-gray-300">CURRENT POSITION</p>
<p className="text-3xl font-bold text-white">5th</p>
<p className="text-3xl font-bold text-white">{driver.currentPosition}th</p>
</div>
<div className="bg-blue-500/20 backdrop-blur-sm px-6 py-3 rounded-full border border-blue-500/30">
<p className="text-sm text-gray-300">POINTS</p>
<p className="text-3xl font-bold text-white">186</p>
<p className="text-3xl font-bold text-white">{driver.totalPoints}</p>
</div>
<div className="bg-slate-800/80 backdrop-blur-sm px-6 py-3 rounded-full border border-slate-700">
<p className="text-sm text-gray-300">PODIUMS</p>
<p className="text-3xl font-bold text-white">12</p>
<p className="text-3xl font-bold text-white">{driver.podiums}</p>
</div>
</div>
</div>
Expand Down
26 changes: 14 additions & 12 deletions f1-driver-landing/components/last-result.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,9 @@
import { Trophy, Clock, Flag } from "lucide-react"
import Image from "next/image"
import { getLastRace } from "@/lib/data"

export function LastResult() {
// Example data - replace with actual last race data
const lastRace = {
name: "Spanish Grand Prix",
circuit: "Circuit de Barcelona-Catalunya",
date: "May 21, 2025",
position: 3,
time: "1:33:42.143",
points: 15,
fastestLap: false,
gridPosition: 4,
positionChange: 1,
}
const lastRace = getLastRace()

return (
<div className="bg-slate-900 rounded-xl overflow-hidden shadow-lg border border-pink-500/20">
Expand All @@ -24,6 +15,17 @@ export function LastResult() {
</div>

<div className="p-6">
<div className="relative h-32 w-full mb-6 rounded-lg overflow-hidden">
<Image
src={lastRace.circuitImage || "/placeholder.svg"}
alt={lastRace.circuit}
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div className="absolute bottom-2 left-2 text-white font-semibold">{lastRace.circuit}</div>
</div>

<div className="flex flex-col md:flex-row items-center gap-6 mb-8">
<div className="flex-1 flex justify-center">
<div className="relative">
Expand Down
28 changes: 2 additions & 26 deletions f1-driver-landing/components/news-feed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,10 @@
import Image from "next/image"
import { CalendarDays, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getNews } from "@/lib/data"

export function NewsFeed() {
// Example data - replace with actual news data
const newsItems = [
{
id: 1,
title: "Driver secures podium finish at Spanish Grand Prix",
excerpt:
"An impressive drive from P4 on the grid to secure a podium finish at the Circuit de Barcelona-Catalunya.",
date: "May 22, 2025",
image: "/placeholder.svg?height=400&width=600&query=formula 1 podium celebration",
},
{
id: 2,
title: "Team announces contract extension for two more seasons",
excerpt:
"The team has confirmed a two-year contract extension, keeping the driver on the grid until the end of 2027.",
date: "May 15, 2025",
image: "/placeholder.svg?height=400&width=600&query=formula 1 contract signing",
},
{
id: 3,
title: "New helmet design revealed for Monaco Grand Prix",
excerpt: "A special one-off helmet design has been unveiled for the upcoming Monaco Grand Prix.",
date: "May 10, 2025",
image: "/placeholder.svg?height=400&width=600&query=formula 1 helmet design",
},
]
const newsItems = getNews()

return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
Expand Down
175 changes: 52 additions & 123 deletions f1-driver-landing/components/race-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,14 @@
import { CalendarDays, Trophy, Clock, MapPin, Flag } from "lucide-react"
import Image from "next/image"
import { getUpcomingRaces, getPastRaces } from "@/lib/data"

interface RaceListProps {
type: "upcoming" | "past"
}

export function RaceList({ type }: RaceListProps) {
// Example data - replace with actual race data
const upcomingRaces = [
{
id: 1,
round: 6,
name: "Monaco Grand Prix",
circuit: "Circuit de Monaco",
date: "June 15, 2025",
time: "14:00 GMT",
country: "Monaco",
countryCode: "MC",
},
{
id: 2,
round: 7,
name: "Canadian Grand Prix",
circuit: "Circuit Gilles Villeneuve",
date: "June 29, 2025",
time: "18:00 GMT",
country: "Canada",
countryCode: "CA",
},
{
id: 3,
round: 8,
name: "British Grand Prix",
circuit: "Silverstone Circuit",
date: "July 13, 2025",
time: "15:00 GMT",
country: "United Kingdom",
countryCode: "GB",
},
{
id: 4,
round: 9,
name: "Hungarian Grand Prix",
circuit: "Hungaroring",
date: "July 27, 2025",
time: "14:00 GMT",
country: "Hungary",
countryCode: "HU",
},
]

const pastRaces = [
{
id: 1,
round: 5,
name: "Spanish Grand Prix",
circuit: "Circuit de Barcelona-Catalunya",
date: "May 21, 2025",
position: 3,
points: 15,
gridPosition: 4,
fastestLap: false,
},
{
id: 2,
round: 4,
name: "Miami Grand Prix",
circuit: "Miami International Autodrome",
date: "May 7, 2025",
position: 5,
points: 10,
gridPosition: 6,
fastestLap: false,
},
{
id: 3,
round: 3,
name: "Chinese Grand Prix",
circuit: "Shanghai International Circuit",
date: "April 23, 2025",
position: 4,
points: 12,
gridPosition: 3,
fastestLap: true,
},
{
id: 4,
round: 2,
name: "Japanese Grand Prix",
circuit: "Suzuka Circuit",
date: "April 9, 2025",
position: 2,
points: 18,
gridPosition: 5,
fastestLap: false,
},
]
const upcomingRaces = getUpcomingRaces()
const pastRaces = getPastRaces()

if (type === "upcoming") {
return (
Expand All @@ -109,29 +23,39 @@ export function RaceList({ type }: RaceListProps) {
<div className="divide-y divide-slate-800">
{upcomingRaces.map((race, index) => (
<div key={race.id} className="p-6 hover:bg-slate-800/50 transition-colors">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<div className="bg-blue-500/20 rounded-full w-12 h-12 flex items-center justify-center border border-blue-500/30">
<span className="text-blue-400 font-bold">{race.round}</span>
<div className="flex items-center gap-4 mb-4">
<div className="relative h-16 w-24 rounded-lg overflow-hidden flex-shrink-0">
<Image
src={race.circuitImage || "/placeholder.svg"}
alt={race.circuit}
fill
className="object-cover"
/>
</div>
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div className="bg-blue-500/20 rounded-full w-12 h-12 flex items-center justify-center border border-blue-500/30">
<span className="text-blue-400 font-bold">{race.round}</span>
</div>
<div>
<h4 className="text-xl font-bold text-white">{race.name}</h4>
<div className="flex items-center gap-2 text-gray-400">
<MapPin className="h-4 w-4" />
<span>{race.circuit}</span>
</div>
</div>
</div>
<div>
<h4 className="text-xl font-bold text-white">{race.name}</h4>
<div className="text-right">
<div className="flex items-center gap-2 text-white mb-1">
<CalendarDays className="h-4 w-4 text-blue-500" />
<span className="font-semibold">{race.date}</span>
</div>
<div className="flex items-center gap-2 text-gray-400">
<MapPin className="h-4 w-4" />
<span>{race.circuit}</span>
<Clock className="h-4 w-4 text-blue-500" />
<span>{race.time}</span>
</div>
</div>
</div>
<div className="text-right">
<div className="flex items-center gap-2 text-white mb-1">
<CalendarDays className="h-4 w-4 text-blue-500" />
<span className="font-semibold">{race.date}</span>
</div>
<div className="flex items-center gap-2 text-gray-400">
<Clock className="h-4 w-4 text-blue-500" />
<span>{race.time}</span>
</div>
</div>
</div>

<div className="flex items-center justify-between">
Expand Down Expand Up @@ -162,23 +86,28 @@ export function RaceList({ type }: RaceListProps) {
<div className="divide-y divide-slate-800">
{pastRaces.map((race) => (
<div key={race.id} className="p-6 hover:bg-slate-800/50 transition-colors">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<div className="bg-pink-500/20 rounded-full w-12 h-12 flex items-center justify-center border border-pink-500/30">
<span className="text-pink-400 font-bold">{race.round}</span>
</div>
<div>
<h4 className="text-xl font-bold text-white">{race.name}</h4>
<div className="flex items-center gap-2 text-gray-400">
<MapPin className="h-4 w-4" />
<span>{race.circuit}</span>
<div className="flex items-center gap-4 mb-4">
<div className="relative h-16 w-24 rounded-lg overflow-hidden flex-shrink-0">
<Image src={race.circuitImage || "/placeholder.svg"} alt={race.circuit} fill className="object-cover" />
</div>
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div className="bg-pink-500/20 rounded-full w-12 h-12 flex items-center justify-center border border-pink-500/30">
<span className="text-pink-400 font-bold">{race.round}</span>
</div>
<div>
<h4 className="text-xl font-bold text-white">{race.name}</h4>
<div className="flex items-center gap-2 text-gray-400">
<MapPin className="h-4 w-4" />
<span>{race.circuit}</span>
</div>
</div>
</div>
</div>
<div className="text-right">
<div className="flex items-center gap-2 text-white mb-1">
<CalendarDays className="h-4 w-4 text-pink-500" />
<span className="font-semibold">{race.date}</span>
<div className="text-right">
<div className="flex items-center gap-2 text-white mb-1">
<CalendarDays className="h-4 w-4 text-pink-500" />
<span className="font-semibold">{race.date}</span>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading