website refactor
This commit is contained in:
@@ -2,8 +2,12 @@
|
||||
|
||||
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 { Heading } from '@/ui/Heading';
|
||||
|
||||
export default function RaceHistoryMockup() {
|
||||
export function RaceHistoryMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
@@ -22,184 +26,321 @@ export default function RaceHistoryMockup() {
|
||||
// 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
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
visible: { transition: { staggerChildren: 0.12 } }
|
||||
}}
|
||||
className="space-y-4 w-full max-w-xs"
|
||||
w="full"
|
||||
maxWidth="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>
|
||||
<Stack gap={4}>
|
||||
{/* Race result - clean and simple */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/60" rounded="xl" p={4} border borderWidth="2px" borderColor="border-primary-blue/40">
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box h="14" w="14" bg="bg-primary-blue/20" rounded="lg" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
|
||||
<Text size="2xl" weight="bold" color="text-primary-blue">P3</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="semibold" color="text-white" block>Watkins Glen</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.6} block>GT3 Sprint</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Simple arrow */}
|
||||
<motion.div variants={itemVariants} className="flex justify-center">
|
||||
<div className="text-primary-blue text-2xl">↓</div>
|
||||
</motion.div>
|
||||
{/* Simple arrow */}
|
||||
<Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
|
||||
<Text color="text-primary-blue" size="2xl">↓</Text>
|
||||
</Box>
|
||||
|
||||
{/* 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>
|
||||
{/* Updates - minimal */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/40" rounded="xl" p={3} border borderColor="border-charcoal-outline">
|
||||
<Stack gap={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
textAlign="center"
|
||||
mb={2}
|
||||
block
|
||||
>
|
||||
Profile Updated
|
||||
</Text>
|
||||
<Box display="flex" gap={2}>
|
||||
<Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-primary-blue/30">
|
||||
<Text size="xs" color="text-primary-blue" weight="semibold" block>Stats ↑</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-performance-green/30">
|
||||
<Text size="xs" color="text-performance-green" weight="semibold" block>+12</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 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
|
||||
<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: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={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>
|
||||
<Stack gap={{ base: 2, sm: 3, md: 4, lg: 5 }}>
|
||||
{/* Race Result Card - Enhanced */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderWidth="2px" borderColor="border-primary-blue/40">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
<Box position="relative" h={{ base: 12, sm: 14, md: 16, lg: 20 }} w={{ base: 12, sm: 14, md: 16, lg: 20 }} bg="bg-charcoal-outline" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" overflow="hidden" flexShrink={0}>
|
||||
<Box position="absolute" inset="0" bg="bg-gradient-to-br from-primary-blue/20 to-performance-green/20" />
|
||||
<Box position="absolute" inset="0" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text color="text-white" size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold">P3</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} mb={1}>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg' }}>🏁</Text>
|
||||
<Heading level={3} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="semibold" color="text-white" truncate>Watkins Glen</Heading>
|
||||
</Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} color="text-white" opacity={0.6} mb={1} block>GT3 Sprint Race</Text>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
24 drivers
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
45 min
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
Just finished
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 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>
|
||||
{/* Connection Flow with Animation */}
|
||||
<Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
|
||||
<Box
|
||||
as={motion.div}
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
y: [0, 5, 0]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<Text color="text-primary-blue" size={{ base: '2xl', sm: '3xl', md: '4xl' }}>↓</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-primary-blue"
|
||||
opacity={0.7}
|
||||
>
|
||||
Auto-sync
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 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 }}
|
||||
{/* Profile Updates Grid - More detailed */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/80" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderColor="border-charcoal-outline">
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.8} textAlign="center" mb={{ base: 2, sm: 3, md: 4 }} block>
|
||||
Profile Updates
|
||||
</Text>
|
||||
|
||||
<Box display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
{/* Career Stats Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-primary-blue/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
>
|
||||
Career Stats
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-performance-green"
|
||||
weight="semibold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
>
|
||||
↑
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
>
|
||||
↑
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
Wins: 24 → 25
|
||||
</div>
|
||||
</div>
|
||||
Wins: 24 → 25
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 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 }}
|
||||
{/* Rating Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-performance-green/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
>
|
||||
Rating
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-performance-green"
|
||||
weight="semibold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
>
|
||||
+12
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
>
|
||||
+12
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
1342 → 1354
|
||||
</div>
|
||||
</div>
|
||||
1342 → 1354
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 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 }}
|
||||
{/* Season Points Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-warning-amber/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
>
|
||||
Season
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-warning-amber"
|
||||
weight="semibold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.7 }}
|
||||
>
|
||||
+18
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
>
|
||||
+18
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
248 → 266 pts
|
||||
</div>
|
||||
</div>
|
||||
248 → 266 pts
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 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 }}
|
||||
{/* Team Points Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-neon-aqua/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
>
|
||||
Team
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-neon-aqua"
|
||||
weight="semibold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
>
|
||||
+18
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
>
|
||||
+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>
|
||||
Contributing
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user