[V0_FILE]typescriptreact:file="components/medal-icon.tsx" isMerged="true" import { Trophy } from "lucide-react" interface MedalIconProps { position: number } export function MedalIcon({ position }: MedalIconProps) { if (position > 3) return null const colors = { 1: "text-yellow-400", 2: "text-slate-400", 3: "text-amber-700", } return } [V0_FILE]typescriptreact:file="components/performance-indicator.tsx" isMerged="true" interface PerformanceIndicatorProps { previousPosition: number currentPosition: number } export function PerformanceIndicator({ previousPosition, currentPosition }: PerformanceIndicatorProps) { if (previousPosition === currentPosition) return null const isImproved = currentPosition < previousPosition return (

{isImproved ? "▲" : "▼"} {Math.abs(previousPosition - currentPosition)}

) } [V0_FILE]typescriptreact:file="components/stat-badge.tsx" isMerged="true" interface StatBadgeProps { label: string value: string | number } export function StatBadge({ label, value }: StatBadgeProps) { return (

{label} {value}

) } [V0_FILE]typescriptreact:file="race-leaderboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Trophy, Timer, Activity } from "lucide-react" interface Player { position: number previousPosition: number username: string avatar: string time: string bestLap: string first: number second: number third: number totalRaces: number winRate: number sector1: number sector2: number sector3: number isLive?: boolean } const players: Player[] = [ { position: 1, previousPosition: 1, username: "Username 1", avatar: "/placeholder.svg?height=32&width=32", time: "0:55.510", bestLap: "0:54.321", first: 1, second: 1, third: 1, totalRaces: 156, winRate: 42, sector1: 100, sector2: 98, sector3: 99, isLive: true, }, { position: 2, previousPosition: 2, username: "Username 2", avatar: "/placeholder.svg?height=32&width=32", time: "1:15.430", bestLap: "1:14.321", first: 0, second: 0, third: 0, totalRaces: 120, winRate: 20, sector1: 95, sector2: 92, sector3: 90, isLive: false, }, { position: 3, previousPosition: 3, username: "Username 3", avatar: "/placeholder.svg?height=32&width=32", time: "1:21.430", bestLap: "1:20.123", first: 0, second: 0, third: 0, totalRaces: 80, winRate: 10, sector1: 90, sector2: 88, sector3: 92, isLive: false, }, { position: 4, previousPosition: 4, username: "Username 4", avatar: "/placeholder.svg?height=32&width=32", time: "1:32.213", bestLap: "1:31.001", first: 0, second: 0, third: 1, totalRaces: 50, winRate: 5, sector1: 85, sector2: 80, sector3: 88, isLive: false, }, { position: 5, previousPosition: 5, username: "Username 5", avatar: "/placeholder.svg?height=32&width=32", time: "1:44.594", bestLap: "1:43.987", first: 0, second: 0, third: 0, totalRaces: 30, winRate: 3, sector1: 80, sector2: 78, sector3: 85, isLive: false, }, { position: 6, previousPosition: 6, username: "Username 6", avatar: "/placeholder.svg?height=32&width=32", time: "1:45.013", bestLap: "1:44.555", first: 0, second: 0, third: 0, totalRaces: 20, winRate: 2, sector1: 75, sector2: 70, sector3: 80, isLive: false, }, { position: 7, previousPosition: 7, username: "Username 7", avatar: "/placeholder.svg?height=32&width=32", time: "1:48.916", bestLap: "1:47.888", first: 0, second: 0, third: 0, totalRaces: 10, winRate: 1, sector1: 70, sector2: 68, sector3: 75, isLive: false, }, { position: 8, previousPosition: 8, username: "Username 8", avatar: "/placeholder.svg?height=32&width=32", time: "1:56.355", bestLap: "1:55.222", first: 0, second: 0, third: 0, totalRaces: 5, winRate: 0, sector1: 65, sector2: 60, sector3: 70, isLive: false, }, { position: 9, previousPosition: 9, username: "Username 9", avatar: "/placeholder.svg?height=32&width=32", time: "2:05.515", bestLap: "2:04.111", first: 0, second: 0, third: 0, totalRaces: 2, winRate: 0, sector1: 60, sector2: 58, sector3: 65, isLive: false, }, { position: 10, previousPosition: 10, username: "Username 10", avatar: "/placeholder.svg?height=32&width=32", time: "2:08.375", bestLap: "2:07.000", first: 0, second: 0, third: 0, totalRaces: 1, winRate: 0, sector1: 55, sector2: 50, sector3: 60, isLive: false, }, ] function MedalIcon({ position }: { position: number }) { if (position > 3) return null const colors = { 1: "text-yellow-400", 2: "text-slate-400", 3: "text-amber-700", } return } function PerformanceIndicator({ previousPosition, currentPosition, }: { previousPosition: number; currentPosition: number }) { if (previousPosition === currentPosition) return null const isImproved = currentPosition < previousPosition return (

{isImproved ? "▲" : "▼"} {Math.abs(previousPosition - currentPosition)}

) } function StatBadge({ label, value }: { label: string; value: string | number }) { return (

{label} {value}

) } export default function RaceLeaderboard() { const [selectedPlayer, setSelectedPlayer] = useState(null) const [isLive, setIsLive] = useState(true) useEffect(() => { const interval = setInterval(() => { setIsLive((prev) => !prev) }, 2000) return () => clearInterval(interval) }, []) return (

RACE RESULTS

{isLive && (

LIVE

)}

{players.map((player) => ( setSelectedPlayer(player)} > ))}

POS	PLAYER	TIME	SECTORS	STATS
{player.position}	{player.isLive && ( )} {player.username} Best: {player.bestLap}	{player.time}	{[player.sector1, player.sector2, player.sector3].map((sector, i) => ( ))}	{player.first} {player.winRate}% {player.totalRaces}

{selectedPlayer && (

{selectedPlayer.username}

Race Statistics

)}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { keyframes: { pulse: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, }, animation: { pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }