105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { motion } from 'framer-motion';
|
|
import { Car, Trophy, Users } from 'lucide-react';
|
|
|
|
const USER_ROLES = [
|
|
{
|
|
icon: Car,
|
|
title: 'Driver',
|
|
description: 'Race, track stats, join teams',
|
|
color: 'primary-blue',
|
|
},
|
|
{
|
|
icon: Trophy,
|
|
title: 'League Admin',
|
|
description: 'Organize leagues and events',
|
|
color: 'performance-green',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Team Manager',
|
|
description: 'Manage team and drivers',
|
|
color: 'purple-400',
|
|
},
|
|
] as const;
|
|
|
|
interface UserRolesPreviewProps {
|
|
variant?: 'full' | 'compact';
|
|
}
|
|
|
|
export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
|
|
if (variant === 'compact') {
|
|
return (
|
|
<Stack mt={8} display={{ base: 'block', lg: 'none' }}>
|
|
<Text align="center" size="xs" color="text-gray-500" mb={4} block>
|
|
One account for all roles
|
|
</Text>
|
|
<Stack direction="row" justify="center" gap={6}>
|
|
{USER_ROLES.map((role) => (
|
|
<Stack key={role.title} direction="col" align="center">
|
|
<Stack
|
|
w="8"
|
|
h="8"
|
|
rounded="lg"
|
|
bg={`bg-${role.color}/20`}
|
|
align="center"
|
|
justify="center"
|
|
mb={1}
|
|
>
|
|
<Text color={`text-${role.color}`}>
|
|
<Icon icon={role.icon} size={4} />
|
|
</Text>
|
|
</Stack>
|
|
<Text size="xs" color="text-gray-500">{role.title}</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack direction="col" gap={3} mb={8}>
|
|
{USER_ROLES.map((role, index) => (
|
|
<Stack
|
|
as={motion.div}
|
|
key={role.title}
|
|
{...({
|
|
initial: { opacity: 0, x: -20 },
|
|
animate: { opacity: 1, x: 0 },
|
|
transition: { delay: index * 0.1 }
|
|
} as any)}
|
|
direction="row"
|
|
align="center"
|
|
gap={4}
|
|
p={4}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/50"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
>
|
|
<Stack
|
|
w="10"
|
|
h="10"
|
|
rounded="lg"
|
|
bg={`bg-${role.color}/20`}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<Text color={`text-${role.color}`}>
|
|
<Icon icon={role.icon} size={5} />
|
|
</Text>
|
|
</Stack>
|
|
<Stack>
|
|
<Heading level={4}>{role.title}</Heading>
|
|
<Text size="sm" color="text-gray-500">{role.description}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|