70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
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',
|
|
},
|
|
];
|
|
|
|
interface UserRolesPreviewProps {
|
|
variant?: 'full' | 'compact';
|
|
}
|
|
|
|
export default function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
|
|
if (variant === 'compact') {
|
|
return (
|
|
<div className="mt-8 lg:hidden">
|
|
<p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
|
|
<div className="flex justify-center gap-6">
|
|
{USER_ROLES.map((role) => (
|
|
<div key={role.title} className="flex flex-col items-center">
|
|
<div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
|
|
<role.icon className={`w-4 h-4 text-${role.color}`} />
|
|
</div>
|
|
<span className="text-xs text-gray-500">{role.title}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3 mb-8">
|
|
{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 }}
|
|
className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
|
|
>
|
|
<div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
|
|
<role.icon className={`w-5 h-5 text-${role.color}`} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-medium">{role.title}</h4>
|
|
<p className="text-sm text-gray-500">{role.description}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |