website refactor
This commit is contained in:
@@ -2,9 +2,8 @@
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
export function LeagueDiscoveryMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
@@ -43,12 +42,12 @@ export function LeagueDiscoveryMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Box mb={3}>
|
||||
<Box h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Stack mb={3}>
|
||||
<Stack h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
|
||||
<Stack display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region'].map((filter) => (
|
||||
<Box
|
||||
<Stack
|
||||
key={filter}
|
||||
h="5"
|
||||
px={3}
|
||||
@@ -59,15 +58,15 @@ export function LeagueDiscoveryMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h="1" w="8" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Stack h="1" w="8" bg="white/10" rounded="none" />
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league) => (
|
||||
<Box
|
||||
<Stack
|
||||
key={league.name}
|
||||
bg="panel-gray/40"
|
||||
border
|
||||
@@ -75,32 +74,32 @@ export function LeagueDiscoveryMockup() {
|
||||
rounded="none"
|
||||
p={3}
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box h="10" w="10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
|
||||
<Stack display="flex" alignItems="start" justifyContent="between" mb={2}>
|
||||
<Stack display="flex" alignItems="center" gap={2}>
|
||||
<Stack h="10" w="10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xl">{league.icon}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Box display="flex" gap={1}>
|
||||
<Box as="span" px={1.5} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Stack h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Stack display="flex" gap={1}>
|
||||
<Stack as="span" px={1.5} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" font="mono">{league.carClass}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Stack display="flex" alignItems="center" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500" font="mono">{league.drivers} DRIVERS • {league.schedule.toUpperCase()}</Text>
|
||||
<Box px={2} py={0.5} bg="primary-accent" rounded="none">
|
||||
<Stack px={2} py={0.5} bg="primary-accent" rounded="none">
|
||||
<Text size="xs" color="text-white" weight="bold">JOIN</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -122,18 +121,18 @@ export function LeagueDiscoveryMockup() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Stack
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
|
||||
>
|
||||
<Box h="2" w="48" bg="white/10" rounded="none" mb={4} />
|
||||
<Stack h="2" w="48" bg="white/10" rounded="none" mb={4} />
|
||||
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
<Stack display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region', 'Skill'].map((filter, i) => (
|
||||
<Box
|
||||
<Stack
|
||||
key={filter}
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
|
||||
@@ -148,13 +147,13 @@ export function LeagueDiscoveryMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h="1" w="10" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Stack h="1" w="10" bg="white/10" rounded="none" />
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Box
|
||||
<Stack
|
||||
as={motion.div}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
@@ -162,7 +161,7 @@ export function LeagueDiscoveryMockup() {
|
||||
>
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league, index) => (
|
||||
<Box
|
||||
<Stack
|
||||
key={league.name}
|
||||
as={motion.div}
|
||||
variants={cardVariants}
|
||||
@@ -179,16 +178,16 @@ export function LeagueDiscoveryMockup() {
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={3}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Stack display="flex" alignItems="start" justifyContent="between" mb={3}>
|
||||
<Stack display="flex" alignItems="center" gap={3}>
|
||||
<Stack h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Text size={{ base: 'base', sm: 'lg', md: 'xl', lg: '2xl' }}>{league.icon}</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h="2" w="40" bg="white/10" rounded="none" mb={2} />
|
||||
<Box display="flex" gap={2}>
|
||||
<Box as="span" px={2} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Stack h="2" w="40" bg="white/10" rounded="none" mb={2} />
|
||||
<Stack display="flex" gap={2}>
|
||||
<Stack as="span" px={2} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -198,8 +197,8 @@ export function LeagueDiscoveryMockup() {
|
||||
>
|
||||
{league.carClass}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
|
||||
</Stack>
|
||||
<Stack as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -209,14 +208,14 @@ export function LeagueDiscoveryMockup() {
|
||||
>
|
||||
{league.region}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Stack display="flex" alignItems="center" justifyContent="between">
|
||||
<Stack display="flex" alignItems="center" gap={4}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -235,10 +234,10 @@ export function LeagueDiscoveryMockup() {
|
||||
>
|
||||
{league.schedule.toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" gap={2}>
|
||||
<Box
|
||||
<Stack display="flex" gap={2}>
|
||||
<Stack
|
||||
as={motion.button}
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
px={3}
|
||||
@@ -254,13 +253,13 @@ export function LeagueDiscoveryMockup() {
|
||||
>
|
||||
JOIN
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user