205 lines
9.5 KiB
TypeScript
205 lines
9.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function RaceHistoryMockup() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
return () => window.removeEventListener('resize', checkMobile);
|
|
}, []);
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
|
|
visible: { opacity: 1, scale: 1 }
|
|
};
|
|
|
|
// Simple, elegant mobile version - just the core story
|
|
if (isMobile) {
|
|
return (
|
|
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite to-iron-gray rounded-lg p-4 overflow-hidden flex items-center justify-center">
|
|
<motion.div
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: { transition: { staggerChildren: 0.12 } }
|
|
}}
|
|
className="space-y-4 w-full max-w-xs"
|
|
>
|
|
{/* Race result - clean and simple */}
|
|
<motion.div variants={itemVariants}>
|
|
<div className="bg-iron-gray/60 rounded-xl p-4 border-2 border-primary-blue/40">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-14 w-14 bg-primary-blue/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<span className="text-2xl font-bold text-primary-blue">P3</span>
|
|
</div>
|
|
<div>
|
|
<div className="text-base font-semibold text-white">Watkins Glen</div>
|
|
<div className="text-xs text-white/60">GT3 Sprint</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Simple arrow */}
|
|
<motion.div variants={itemVariants} className="flex justify-center">
|
|
<div className="text-primary-blue text-2xl">↓</div>
|
|
</motion.div>
|
|
|
|
{/* Updates - minimal */}
|
|
<motion.div variants={itemVariants}>
|
|
<div className="bg-iron-gray/40 rounded-xl p-3 border border-charcoal-outline space-y-2">
|
|
<div className="text-xs text-white/70 text-center mb-2">Profile Updated</div>
|
|
<div className="flex gap-2">
|
|
<div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-primary-blue/30">
|
|
<div className="text-xs text-primary-blue font-semibold">Stats ↑</div>
|
|
</div>
|
|
<div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-performance-green/30">
|
|
<div className="text-xs text-performance-green font-semibold">+12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Desktop version - richer with more updates
|
|
return (
|
|
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-1.5 sm:p-3 md:p-5 lg:p-8 overflow-hidden">
|
|
<motion.div
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: { transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 } }
|
|
}}
|
|
className="space-y-2 sm:space-y-3 md:space-y-4 lg:space-y-5"
|
|
>
|
|
{/* Race Result Card - Enhanced */}
|
|
<motion.div variants={itemVariants}>
|
|
<div className="bg-iron-gray rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border-2 border-primary-blue/40">
|
|
<div className="flex items-center gap-2 sm:gap-3 md:gap-4">
|
|
<div className="relative h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 lg:h-20 lg:w-20 bg-charcoal-outline rounded-lg border-2 border-primary-blue/30 overflow-hidden flex-shrink-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/20 to-performance-green/20"></div>
|
|
<div className="absolute inset-0 flex items-center justify-center text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold">P3</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1 sm:gap-1.5 md:gap-2 mb-1">
|
|
<div className="text-sm sm:text-base md:text-lg">🏁</div>
|
|
<div className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-white truncate">Watkins Glen</div>
|
|
</div>
|
|
<div className="text-xs sm:text-sm md:text-base text-white/60 mb-1">GT3 Sprint Race</div>
|
|
<div className="flex items-center gap-2 sm:gap-3 md:gap-4 text-[10px] sm:text-xs md:text-sm text-white/50">
|
|
<span>24 drivers</span>
|
|
<span>•</span>
|
|
<span>45 min</span>
|
|
<span>•</span>
|
|
<span>Just finished</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Connection Flow with Animation */}
|
|
<motion.div variants={itemVariants} className="flex justify-center">
|
|
<motion.div
|
|
className="flex flex-col items-center gap-1"
|
|
animate={shouldReduceMotion ? {} : {
|
|
y: [0, 5, 0]
|
|
}}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
>
|
|
<div className="text-primary-blue text-2xl sm:text-3xl md:text-4xl">↓</div>
|
|
<div className="text-[10px] sm:text-xs text-primary-blue/70">Auto-sync</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Profile Updates Grid - More detailed */}
|
|
<motion.div variants={itemVariants}>
|
|
<div className="bg-iron-gray/80 rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border border-charcoal-outline">
|
|
<div className="text-xs sm:text-sm md:text-base font-semibold text-white/80 text-center mb-2 sm:mb-3 md:mb-4">
|
|
Profile Updates
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 sm:gap-3 md:gap-4">
|
|
{/* Career Stats Update */}
|
|
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-primary-blue/30">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Career Stats</span>
|
|
<motion.span
|
|
className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold"
|
|
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 0.5, delay: 0.5 }}
|
|
>
|
|
↑
|
|
</motion.span>
|
|
</div>
|
|
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
|
Wins: 24 → 25
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rating Update */}
|
|
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-performance-green/30">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Rating</span>
|
|
<motion.span
|
|
className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold font-mono"
|
|
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
|
>
|
|
+12
|
|
</motion.span>
|
|
</div>
|
|
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
|
1342 → 1354
|
|
</div>
|
|
</div>
|
|
|
|
{/* Season Points Update */}
|
|
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-warning-amber/30">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Season</span>
|
|
<motion.span
|
|
className="text-[10px] sm:text-xs md:text-sm text-warning-amber font-semibold font-mono"
|
|
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 0.5, delay: 0.7 }}
|
|
>
|
|
+18
|
|
</motion.span>
|
|
</div>
|
|
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
|
248 → 266 pts
|
|
</div>
|
|
</div>
|
|
|
|
{/* Team Points Update */}
|
|
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-neon-aqua/30">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Team</span>
|
|
<motion.span
|
|
className="text-[10px] sm:text-xs md:text-sm text-neon-aqua font-semibold font-mono"
|
|
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 0.5, delay: 0.8 }}
|
|
>
|
|
+18
|
|
</motion.span>
|
|
</div>
|
|
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
|
Contributing
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |