280 lines
9.5 KiB
TypeScript
280 lines
9.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useReducedMotion, useMotionValue, useSpring } from 'framer-motion';
|
|
import { useEffect, useState } from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
export function StandingsTableMockup() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [hoveredRow, setHoveredRow] = useState<number | null>(null);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMobile(window.innerWidth < 768);
|
|
}, []);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
|
<Box mb={3}>
|
|
<Box display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-gray/30">
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
color="text-gray-600"
|
|
>
|
|
POS
|
|
</Text>
|
|
<Text size="xs" flexGrow={1} weight="bold" color="text-gray-500" className="uppercase tracking-widest">Driver</Text>
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
color="text-gray-600"
|
|
>
|
|
PTS
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Stack gap={1}>
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<Box
|
|
key={i}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
py={2}
|
|
px={2}
|
|
rounded="none"
|
|
border
|
|
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
|
|
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
|
|
>
|
|
<Box
|
|
h="6"
|
|
w="6"
|
|
rounded="none"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
|
|
color={i <= 3 ? 'text-white' : 'text-gray-500'}
|
|
font="mono"
|
|
weight="bold"
|
|
>
|
|
{i}
|
|
</Box>
|
|
<Box flexGrow={1} display="flex" alignItems="center" gap={2}>
|
|
<Box h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
|
|
</Box>
|
|
<Box position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
|
|
<Box
|
|
position="absolute"
|
|
insetY="0"
|
|
left="0"
|
|
bg={i <= 3 ? 'primary-accent/40' : 'gray-700/40'}
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ width: `${100 - (i - 1) * 15}%` }}
|
|
/>
|
|
<Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
|
|
<Text size="xs" font="mono" weight="bold" color="text-white">
|
|
{300 - i * 20}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const getRowAnimation = (i: number) => ({
|
|
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -10 },
|
|
visible: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: {
|
|
delay: shouldReduceMotion ? 0 : i * 0.05,
|
|
duration: 0.3
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
|
<Box mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
color="text-gray-600"
|
|
mb={{ base: 1.5, sm: 2, md: 3 }}
|
|
block
|
|
font="mono"
|
|
uppercase
|
|
className="tracking-widest"
|
|
>
|
|
Real-time standings updated after every race
|
|
</Text>
|
|
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-gray/30">
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
color="text-gray-500"
|
|
>
|
|
POS
|
|
</Text>
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
flexGrow={1}
|
|
weight="bold"
|
|
color="text-gray-400"
|
|
className="uppercase tracking-widest"
|
|
>
|
|
Driver
|
|
</Text>
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
color="text-gray-500"
|
|
className="hidden md:block uppercase tracking-widest"
|
|
>
|
|
Wins
|
|
</Text>
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Text
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
color="text-gray-500"
|
|
className="uppercase tracking-widest"
|
|
>
|
|
Points
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Stack gap={1}>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
|
<Box
|
|
key={i}
|
|
as={motion.div}
|
|
variants={getRowAnimation(i)}
|
|
initial="hidden"
|
|
animate="visible"
|
|
position="relative"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
|
py={{ base: 1.5, sm: 2, md: 2.5 }}
|
|
px={{ base: 1.5, sm: 2, md: 3 }}
|
|
rounded="none"
|
|
border
|
|
transition
|
|
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
|
|
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
|
|
onHoverStart={() => !shouldReduceMotion && setHoveredRow(i)}
|
|
onHoverEnd={() => setHoveredRow(null)}
|
|
whileHover={shouldReduceMotion ? {} : {
|
|
x: 4,
|
|
borderColor: '#198CFF30',
|
|
transition: { duration: 0.15 }
|
|
}}
|
|
>
|
|
<Box
|
|
as={motion.div}
|
|
h={{ base: 6, sm: 7 }}
|
|
w={{ base: 6, sm: 7 }}
|
|
rounded="none"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
weight="bold"
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '11px' }}
|
|
bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
|
|
color={i <= 3 ? 'text-white' : 'text-gray-500'}
|
|
font="mono"
|
|
>
|
|
{i}
|
|
</Box>
|
|
<Box flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
|
<Box h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
|
|
</Box>
|
|
<Box h="1" w={{ base: 10, sm: 12, md: 16 }} bg="white/5" rounded="none"
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
className="hidden md:block"
|
|
/>
|
|
<Box position="relative">
|
|
<AnimatedPoints
|
|
points={300 - i * 20}
|
|
position={i}
|
|
shouldReduceMotion={shouldReduceMotion ?? false}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function AnimatedPoints({
|
|
points,
|
|
position,
|
|
shouldReduceMotion
|
|
}: {
|
|
points: number;
|
|
position: number;
|
|
shouldReduceMotion: boolean;
|
|
}) {
|
|
const motionValue = useMotionValue(0);
|
|
const spring = useSpring(motionValue, { stiffness: 50, damping: 20 });
|
|
|
|
useEffect(() => {
|
|
if (shouldReduceMotion) {
|
|
motionValue.set(points);
|
|
} else {
|
|
setTimeout(() => motionValue.set(points), 100 + position * 50);
|
|
}
|
|
}, [points, position, shouldReduceMotion, motionValue]);
|
|
|
|
const percentage = (points / 300) * 100;
|
|
|
|
return (
|
|
<Box position="relative" w={{ base: 12, sm: 16, md: 20, lg: 24 }} h={{ base: 4, sm: 5, md: 6 }} bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
|
|
<Box
|
|
as={motion.div}
|
|
position="absolute"
|
|
insetY="0"
|
|
left="0"
|
|
bg={position <= 3 ? 'primary-accent/40' : 'gray-700/40'}
|
|
initial={{ width: '0%' }}
|
|
animate={{ width: `${percentage}%` }}
|
|
transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
|
|
/>
|
|
<Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
|
|
<Box as={motion.span}
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{ fontSize: '10px' }}
|
|
font="mono"
|
|
weight="bold"
|
|
color="text-white"
|
|
>
|
|
{shouldReduceMotion ? points : <Box as={motion.span}>{spring}</Box>}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|