95 lines
3.8 KiB
TypeScript
95 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Trophy, Users, Award } from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
import Heading from '@/components/ui/Heading';
|
|
import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
|
|
import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
|
|
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
// ============================================================================
|
|
// TYPES
|
|
// ============================================================================
|
|
|
|
interface LeaderboardsTemplateProps {
|
|
viewData: LeaderboardsViewData;
|
|
}
|
|
|
|
// ============================================================================
|
|
// MAIN TEMPLATE COMPONENT
|
|
// ============================================================================
|
|
|
|
export function LeaderboardsTemplate({ viewData }: LeaderboardsTemplateProps) {
|
|
const router = useRouter();
|
|
|
|
const handleDriverClick = (driverId: string) => {
|
|
router.push(routes.driver.detail(driverId));
|
|
};
|
|
|
|
const handleTeamClick = (teamId: string) => {
|
|
router.push(routes.team.detail(teamId));
|
|
};
|
|
|
|
const handleNavigateToDrivers = () => {
|
|
router.push(routes.leaderboards.drivers);
|
|
};
|
|
|
|
const handleNavigateToTeams = () => {
|
|
router.push(routes.team.leaderboard);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 pb-12">
|
|
<div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
|
|
<div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
|
|
<Award className="w-7 h-7 text-yellow-400" />
|
|
</div>
|
|
<div>
|
|
<Heading level={1} className="text-3xl lg:text-4xl">
|
|
Leaderboards
|
|
</Heading>
|
|
<p className="text-gray-400">Where champions rise and legends are made</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
|
|
Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleNavigateToDrivers}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Trophy className="w-4 h-4 text-primary-blue" />
|
|
Driver Rankings
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleNavigateToTeams}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Users className="w-4 h-4 text-purple-400" />
|
|
Team Rankings
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<DriverLeaderboardPreview drivers={viewData.drivers} onDriverClick={handleDriverClick} onNavigateToDrivers={handleNavigateToDrivers} />
|
|
<TeamLeaderboardPreview teams={viewData.teams} onTeamClick={handleTeamClick} onNavigateToTeams={handleNavigateToTeams} />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |