93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
|
|
import { Leader } from './types';
|
|
|
|
interface LeaderCardProps {
|
|
leader: Leader;
|
|
isSelected: boolean;
|
|
onSelect: () => void;
|
|
}
|
|
|
|
export default function LeaderCard({ leader, isSelected, onSelect }: LeaderCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
whileHover={{ scale: 1.005 }}
|
|
transition={{ duration: 0.2 }}
|
|
className={`
|
|
bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100
|
|
${isSelected
|
|
? 'ring-2 ring-[#00308F]'
|
|
: 'hover:shadow-lg hover:border-blue-100'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex flex-col sm:flex-row">
|
|
{/* Image Container */}
|
|
<div className="sm:w-48 h-64 sm:h-auto flex-shrink-0">
|
|
<img
|
|
src={leader.imageUrl}
|
|
alt={leader.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="flex-1 p-6">
|
|
<div className="flex flex-col h-full">
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{leader.name}
|
|
</h3>
|
|
<span className="px-3 py-1 text-sm font-medium bg-blue-50 text-[#00308F] rounded-full">
|
|
{leader.rank}
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-600 mb-4">{leader.division}</p>
|
|
|
|
{/* Contact Information */}
|
|
<div className="space-y-2 text-sm text-gray-600">
|
|
<p className="flex items-center">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
{leader.email}
|
|
</p>
|
|
<p className="flex items-center">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
|
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
{leader.phone}
|
|
</p>
|
|
<p className="flex items-center">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
{leader.office}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onSelect}
|
|
className="mt-auto w-full sm:w-auto flex items-center justify-center gap-2
|
|
bg-[#00308F] text-white py-3 px-6 rounded-lg
|
|
hover:bg-[#002070] transition-all duration-300
|
|
focus:outline-none focus:ring-2 focus:ring-[#00308F] focus:ring-opacity-50
|
|
transform hover:-translate-y-0.5"
|
|
>
|
|
<PaperAirplaneIcon className="w-5 h-5" />
|
|
Compose Letter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|