110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import { mockStaff, mockPublications } from '@/lib/mockData';
|
||
import { Staff } from '@/types';
|
||
import Image from 'next/image';
|
||
|
||
export default function StaffPage() {
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<div className="mb-8">
|
||
<h1 className="text-4xl font-bold text-gray-900 mb-4">Сотрудники</h1>
|
||
<p className="text-lg text-gray-600">
|
||
Наша команда опытных исследователей и специалистов в области радиофотоники
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{mockStaff.map(staff => (
|
||
<StaffCard key={staff.id} staff={staff} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StaffCard({ staff }: { staff: Staff }) {
|
||
const staffPublications = mockPublications.filter(pub =>
|
||
staff.publications.includes(pub.id)
|
||
);
|
||
|
||
return (
|
||
<div className="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
||
{/* Photo */}
|
||
<div className="relative h-64 bg-gray-200">
|
||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent" />
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<div className="w-32 h-32 bg-gray-300 rounded-full flex items-center justify-center">
|
||
<span className="text-3xl text-gray-600">👤</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-6">
|
||
<div className="mb-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 mb-1">{staff.name}</h3>
|
||
<p className="text-blue-600 font-medium">{staff.position}</p>
|
||
<p className="text-sm text-gray-500">{staff.degree}</p>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-700 text-sm leading-relaxed">{staff.bio}</p>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div className="mb-4 space-y-2">
|
||
<div className="flex items-center text-sm text-gray-600">
|
||
<span className="w-4 h-4 mr-2">📧</span>
|
||
<a href={`mailto:${staff.email}`} className="hover:text-blue-600 transition-colors">
|
||
{staff.email}
|
||
</a>
|
||
</div>
|
||
{staff.phone && (
|
||
<div className="flex items-center text-sm text-gray-600">
|
||
<span className="w-4 h-4 mr-2">📞</span>
|
||
<a href={`tel:${staff.phone}`} className="hover:text-blue-600 transition-colors">
|
||
{staff.phone}
|
||
</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Research Interests */}
|
||
<div className="mb-4">
|
||
<h4 className="text-sm font-semibold text-gray-900 mb-2">Области исследований:</h4>
|
||
<div className="flex flex-wrap gap-1">
|
||
{staff.researchInterests.map(interest => (
|
||
<span
|
||
key={interest}
|
||
className="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded"
|
||
>
|
||
{interest}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Publications */}
|
||
{staffPublications.length > 0 && (
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-gray-900 mb-2">
|
||
Публикации ({staffPublications.length}):
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{staffPublications.slice(0, 2).map(pub => (
|
||
<div key={pub.id} className="text-xs text-gray-600">
|
||
<p className="font-medium text-gray-800 line-clamp-1">{pub.title}</p>
|
||
<p className="text-gray-500">{pub.journal}, {pub.year}</p>
|
||
</div>
|
||
))}
|
||
{staffPublications.length > 2 && (
|
||
<p className="text-xs text-blue-600">
|
||
и еще {staffPublications.length - 2} публикаций...
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
} |