82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface RoleCardProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
features: string[];
|
|
color: string;
|
|
selected?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function RoleCard({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
features,
|
|
color,
|
|
selected = false,
|
|
onClick,
|
|
}: RoleCardProps) {
|
|
return (
|
|
<motion.button
|
|
onClick={onClick}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className={`w-full text-left p-4 rounded-xl border transition-all duration-200 ${
|
|
selected
|
|
? `border-${color} bg-${color}/10 shadow-[0_0_20px_rgba(25,140,255,0.2)]`
|
|
: 'border-charcoal-outline bg-iron-gray/50 hover:border-gray-600 hover:bg-iron-gray'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
|
|
selected ? `bg-${color}/20` : 'bg-deep-graphite'
|
|
}`}
|
|
>
|
|
<Icon className={`w-5 h-5 ${selected ? `text-${color}` : 'text-gray-400'}`} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3
|
|
className={`font-semibold transition-colors ${
|
|
selected ? 'text-white' : 'text-gray-200'
|
|
}`}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5">{description}</p>
|
|
</div>
|
|
<div
|
|
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${
|
|
selected ? 'border-primary-blue bg-primary-blue' : 'border-gray-600'
|
|
}`}
|
|
>
|
|
{selected && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="w-2 h-2 rounded-full bg-white"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
|
|
<ul className="space-y-1">
|
|
{features.map((feature, index) => (
|
|
<li key={index} className="text-xs text-gray-400 flex items-center gap-2">
|
|
<span
|
|
className={`w-1 h-1 rounded-full ${selected ? 'bg-primary-blue' : 'bg-gray-600'}`}
|
|
/>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</motion.button>
|
|
);
|
|
} |