97 lines
3.5 KiB
TypeScript
97 lines
3.5 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { Mail, Phone, Building2, User } from 'lucide-react';
|
|
import type { Faculty } from '@/types';
|
|
|
|
interface FacultyCardProps {
|
|
faculty: Faculty;
|
|
}
|
|
|
|
const AVATAR_COLORS = [
|
|
['#F97316', '#FB923C'],
|
|
['#8B5CF6', '#A78BFA'],
|
|
['#10B981', '#34D399'],
|
|
['#3B82F6', '#60A5FA'],
|
|
['#EC4899', '#F472B6'],
|
|
['#F59E0B', '#FCD34D'],
|
|
];
|
|
|
|
export default function FacultyCard({ faculty }: FacultyCardProps) {
|
|
const colorIndex = parseInt(faculty.id) % AVATAR_COLORS.length;
|
|
const [from, to] = AVATAR_COLORS[colorIndex];
|
|
const initials = faculty.name
|
|
.split(' ')
|
|
.filter((_, i) => i === 0 || i === faculty.name.split(' ').length - 1)
|
|
.map((n) => n[0])
|
|
.join('');
|
|
|
|
return (
|
|
<motion.div
|
|
whileHover={{ y: -5, boxShadow: '0 16px 40px -8px rgba(0,0,0,0.12)' }}
|
|
transition={{ duration: 0.25 }}
|
|
className="bg-white border border-[#E5E7EB] rounded-2xl p-5 flex flex-col gap-4"
|
|
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
|
>
|
|
{/* Avatar + Name */}
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-lg shrink-0"
|
|
style={{ background: `linear-gradient(135deg, ${from}, ${to})`, fontFamily: 'Poppins, sans-serif' }}
|
|
>
|
|
{initials}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-[#1E293B] text-sm leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
|
{faculty.name}
|
|
</h3>
|
|
<p className="text-xs text-[#F97316] font-medium mt-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>
|
|
{faculty.designation}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-xs text-[#475569]">
|
|
<Building2 className="w-3.5 h-3.5 text-[#94A3B8] shrink-0" />
|
|
<span style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.department}</span>
|
|
</div>
|
|
{faculty.office && (
|
|
<div className="flex items-center gap-2 text-xs text-[#475569]">
|
|
<User className="w-3.5 h-3.5 text-[#94A3B8] shrink-0" />
|
|
<span style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office}</span>
|
|
</div>
|
|
)}
|
|
{faculty.specialization && (
|
|
<div className="text-xs text-[#94A3B8] pl-5" style={{ fontFamily: 'Inter, sans-serif' }}>
|
|
{faculty.specialization}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Contact */}
|
|
<div className="flex items-center gap-2 pt-2 border-t border-[#E5E7EB]">
|
|
<a
|
|
href={`mailto:${faculty.email}`}
|
|
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium transition-all hover:bg-[#FFF7ED]"
|
|
style={{ color: '#F97316', fontFamily: 'Poppins, sans-serif' }}
|
|
aria-label={`Email ${faculty.name}`}
|
|
>
|
|
<Mail className="w-3.5 h-3.5" />
|
|
Email
|
|
</a>
|
|
{faculty.phone && (
|
|
<a
|
|
href={`tel:${faculty.phone}`}
|
|
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium text-[#475569] transition-all hover:bg-gray-50"
|
|
style={{ fontFamily: 'Poppins, sans-serif' }}
|
|
aria-label={`Call ${faculty.name}`}
|
|
>
|
|
<Phone className="w-3.5 h-3.5" />
|
|
Call
|
|
</a>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|