website refactor
This commit is contained in:
@@ -17,30 +17,30 @@ export function StandingsTableMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<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-charcoal-outline">
|
||||
<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: '12px' }}
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-600"
|
||||
>
|
||||
#
|
||||
POS
|
||||
</Text>
|
||||
<Text size="xs" flexGrow={1} weight="semibold" color="text-white">Driver</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: '12px' }}
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-600"
|
||||
>
|
||||
Pts
|
||||
PTS
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={2}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -49,49 +49,41 @@ export function StandingsTableMockup() {
|
||||
gap={2}
|
||||
py={2}
|
||||
px={2}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
border
|
||||
bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
|
||||
borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
|
||||
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
|
||||
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
|
||||
>
|
||||
<Box
|
||||
h="7"
|
||||
w="7"
|
||||
rounded="full"
|
||||
h="6"
|
||||
w="6"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-400'}
|
||||
shadow={i <= 3 ? '0_0_12px_rgba(25,140,255,0.3)' : undefined}
|
||||
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="5" w="5" rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
>
|
||||
🏎️
|
||||
</Text>
|
||||
</Box>
|
||||
<Box h="2.5" fullWidth maxWidth="100px" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box position="relative" w="16" h="5" bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
|
||||
<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 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
|
||||
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="semibold" color="text-white">
|
||||
<Text size="xs" font="mono" weight="bold" color="text-white">
|
||||
{300 - i * 20}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -104,47 +96,48 @@ export function StandingsTableMockup() {
|
||||
}
|
||||
|
||||
const getRowAnimation = (i: number) => ({
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
x: 0,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.05,
|
||||
type: 'spring' as const,
|
||||
stiffness: 300,
|
||||
damping: 24
|
||||
duration: 0.3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<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-white"
|
||||
opacity={0.5}
|
||||
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-charcoal-outline">
|
||||
<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-400"
|
||||
color="text-gray-500"
|
||||
>
|
||||
#
|
||||
POS
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
flexGrow={1}
|
||||
weight="semibold"
|
||||
color="text-white"
|
||||
weight="bold"
|
||||
color="text-gray-400"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Driver
|
||||
</Text>
|
||||
@@ -152,9 +145,8 @@ export function StandingsTableMockup() {
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="hidden md:block"
|
||||
color="text-gray-500"
|
||||
className="hidden md:block uppercase tracking-widest"
|
||||
>
|
||||
Wins
|
||||
</Text>
|
||||
@@ -163,21 +155,16 @@ export function StandingsTableMockup() {
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-500"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Points
|
||||
</Text>
|
||||
<Text color="text-performance-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
>
|
||||
●
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={0.5}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -189,18 +176,18 @@ export function StandingsTableMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
py={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }}
|
||||
py={{ base: 1.5, sm: 2, md: 2.5 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
border
|
||||
transition
|
||||
bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
|
||||
borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
|
||||
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 ? {} : {
|
||||
scale: 1.01,
|
||||
boxShadow: '0 0 20px rgba(25,140,255,0.3)',
|
||||
x: 4,
|
||||
borderColor: '#198CFF30',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
@@ -208,30 +195,23 @@ export function StandingsTableMockup() {
|
||||
as={motion.div}
|
||||
h={{ base: 6, sm: 7 }}
|
||||
w={{ base: 6, sm: 7 }}
|
||||
rounded="full"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-400'}
|
||||
animate={
|
||||
shouldReduceMotion ? {} : i <= 3 && hoveredRow === i
|
||||
? { scale: 1.15, boxShadow: '0 0 28px rgba(25,140,255,0.5)' }
|
||||
: {}
|
||||
}
|
||||
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={{ base: 4, sm: 5, md: 6 }} w={{ base: 4, sm: 5, md: 6 }} rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }}>🏎️</Text>
|
||||
</Box>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} w={{ base: 10, sm: 12, md: 16 }} bg="bg-white/5" rounded="sm" font="mono"
|
||||
<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"
|
||||
/>
|
||||
@@ -272,13 +252,13 @@ function AnimatedPoints({
|
||||
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, lg: 7 }} bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
|
||||
<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 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
|
||||
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 }}
|
||||
@@ -288,7 +268,7 @@ function AnimatedPoints({
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
color="text-white"
|
||||
>
|
||||
{shouldReduceMotion ? points : <Box as={motion.span}>{spring}</Box>}
|
||||
|
||||
Reference in New Issue
Block a user