80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { ListItem, ListItemInfo } from '@/ui/ListItem';
|
|
import { motion } from 'framer-motion';
|
|
import { Car, Trophy, Users } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
const USER_ROLES = [
|
|
{
|
|
icon: Car,
|
|
title: 'Driver',
|
|
description: 'Race, track stats, join teams',
|
|
intent: 'primary' as const,
|
|
},
|
|
{
|
|
icon: Trophy,
|
|
title: 'League Admin',
|
|
description: 'Organize leagues and events',
|
|
intent: 'success' as const,
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Team Manager',
|
|
description: 'Manage team and drivers',
|
|
intent: 'telemetry' as const,
|
|
},
|
|
] as const;
|
|
|
|
interface UserRolesPreviewProps {
|
|
variant?: 'full' | 'compact';
|
|
}
|
|
|
|
export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
|
|
if (variant === 'compact') {
|
|
return (
|
|
<div style={{ marginTop: '2rem' }}>
|
|
<Text align="center" size="xs" variant="low" block marginBottom={4}>
|
|
One account for all roles
|
|
</Text>
|
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '1.5rem' }}>
|
|
{USER_ROLES.map((role) => (
|
|
<div key={role.title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem' }}>
|
|
<div style={{ width: '2rem', height: '2rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Icon icon={role.icon} size={4} intent={role.intent} />
|
|
</div>
|
|
<Text size="xs" variant="low">{role.title}</Text>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2rem' }}>
|
|
{USER_ROLES.map((role, index) => (
|
|
<motion.div
|
|
key={role.title}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
>
|
|
<ListItem>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Icon icon={role.icon} size={5} intent={role.intent} />
|
|
</div>
|
|
<ListItemInfo
|
|
title={role.title}
|
|
description={role.description}
|
|
/>
|
|
</div>
|
|
</ListItem>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|