mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/website/components/mockups/StandingsTableMockup.tsx
View File

@@ -2,9 +2,8 @@
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';
import { Text } from '@/ui/Text';
export function StandingsTableMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -17,9 +16,9 @@ export function StandingsTableMockup() {
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">
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack mb={3}>
<Stack 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' }}
@@ -37,12 +36,12 @@ export function StandingsTableMockup() {
>
PTS
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Stack gap={1}>
{[1, 2, 3, 4, 5].map((i) => (
<Box
<Stack
key={i}
display="flex"
alignItems="center"
@@ -54,7 +53,7 @@ export function StandingsTableMockup() {
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
>
<Box
<Stack
h="6"
w="6"
rounded="none"
@@ -69,12 +68,12 @@ export function StandingsTableMockup() {
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
</Stack>
<Stack flexGrow={1} display="flex" alignItems="center" gap={2}>
<Stack h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
</Stack>
<Stack position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
<Stack
position="absolute"
insetY="0"
left="0"
@@ -82,16 +81,16 @@ export function StandingsTableMockup() {
// 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">
<Stack 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>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
@@ -108,8 +107,8 @@ export function StandingsTableMockup() {
});
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 }}>
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
<Stack mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -122,7 +121,7 @@ export function StandingsTableMockup() {
>
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">
<Stack 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' }}
@@ -150,7 +149,7 @@ export function StandingsTableMockup() {
>
Wins
</Text>
<Box display="flex" alignItems="center" gap={1}>
<Stack display="flex" alignItems="center" gap={1}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -160,13 +159,13 @@ export function StandingsTableMockup() {
>
Points
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
<Stack gap={1}>
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
<Box
<Stack
key={i}
as={motion.div}
variants={getRowAnimation(i)}
@@ -191,7 +190,7 @@ export function StandingsTableMockup() {
transition: { duration: 0.15 }
}}
>
<Box
<Stack
as={motion.div}
h={{ base: 6, sm: 7 }}
w={{ base: 6, sm: 7 }}
@@ -207,25 +206,25 @@ export function StandingsTableMockup() {
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"
</Stack>
<Stack flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
<Stack h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
</Stack>
<Stack 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">
<Stack position="relative">
<AnimatedPoints
points={300 - i * 20}
position={i}
shouldReduceMotion={shouldReduceMotion ?? false}
/>
</Box>
</Box>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
@@ -252,8 +251,8 @@ 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 }} bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
<Box
<Stack 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">
<Stack
as={motion.div}
position="absolute"
insetY="0"
@@ -263,17 +262,17 @@ function AnimatedPoints({
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}
<Stack position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
<Stack 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>
{shouldReduceMotion ? points : <Stack as={motion.span}>{spring}</Stack>}
</Stack>
</Stack>
</Stack>
);
}