forked from izu/student-web-if-development-kit
tampilan card
This commit is contained in:
cw
@@ -1,4 +1,4 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { useEffect, type ReactNode } from 'react';
|
||||
import { X, ExternalLink, Users, BookOpen, Calendar, Tag, FileText } from 'lucide-react';
|
||||
import type { Project } from '../data';
|
||||
import { useLang } from '../context/LanguageContext';
|
||||
@@ -22,6 +22,18 @@ function InfoRow({ icon, label, value }: { icon: ReactNode; label: string; value
|
||||
|
||||
export default function ProjectModal({ project, onClose }: ProjectModalProps) {
|
||||
const { t } = useLang();
|
||||
|
||||
useEffect(() => {
|
||||
if (project) {
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
return () => {
|
||||
document.documentElement.style.overflow = '';
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [project]);
|
||||
|
||||
if (!project) return null;
|
||||
|
||||
return (
|
||||
@@ -33,11 +45,11 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
|
||||
aria-label={project.title}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl animate-fade-in"
|
||||
className="bg-white rounded-xl max-w-lg w-full max-h-[90vh] overflow-y-auto shadow-2xl animate-fade-in"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image header */}
|
||||
<div className="relative h-56 overflow-hidden rounded-t-xl bg-slate-200 shrink-0">
|
||||
<div className="relative h-56 md:h-64 overflow-hidden rounded-t-xl bg-slate-200 shrink-0">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
@@ -46,21 +58,20 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
|
||||
|
||||
{/* Close button */}
|
||||
{/* Close button — dark bg so icon always visible on any image */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label={t.modal.close}
|
||||
className="absolute top-3 right-3 w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-md"
|
||||
className="absolute top-3 right-3 z-50 w-8 h-8 bg-slate-900/50 hover:bg-slate-900/80 backdrop-blur rounded-full flex items-center justify-center transition-colors shadow-md"
|
||||
>
|
||||
<X size={18} className="text-slate-700" />
|
||||
<X size={16} className="text-white" />
|
||||
</button>
|
||||
|
||||
{/* Category badge */}
|
||||
{project.category && project.category.length > 0 && (
|
||||
<div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
|
||||
<div className="absolute bottom-3 left-4 flex flex-wrap gap-1.5">
|
||||
{project.category.map((cat, i) => (
|
||||
<span key={i} className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5 uppercase tracking-wide">
|
||||
<Tag size={12} />
|
||||
<span key={i} className="bg-primary-gold text-slate-900 text-[10px] font-bold px-2.5 py-1 rounded shadow-sm flex items-center gap-1 uppercase tracking-wide">
|
||||
{cat}
|
||||
</span>
|
||||
))}
|
||||
@@ -70,80 +81,65 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-primary-navy leading-snug mb-5">{project.title}</h2>
|
||||
<h2 className="text-lg font-bold text-slate-900 leading-snug mb-1">{project.title}</h2>
|
||||
|
||||
{project.category && project.category.length > 0 && (
|
||||
<div className="text-xs text-slate-400 mb-4 font-medium">
|
||||
{project.year} • {project.category.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-slate-600 text-xs leading-relaxed mb-5">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
{/* Info grid */}
|
||||
<div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg mb-5">
|
||||
{project.studentName && (
|
||||
<InfoRow icon={<Users size={14} />} label={t.modal.mahasiswa} value={project.studentName} />
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4 text-xs">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Mahasiswa</p>
|
||||
<p className="font-bold text-slate-900">{project.studentName}</p>
|
||||
</div>
|
||||
{project.nim && (
|
||||
<InfoRow icon={<BookOpen size={14} />} label={t.modal.nim} value={project.nim} />
|
||||
)}
|
||||
{project.year && (
|
||||
<InfoRow icon={<Calendar size={14} />} label={t.modal.tahun} value={String(project.year)} />
|
||||
)}
|
||||
{project.category && project.category.length > 0 && (
|
||||
<InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category.join(', ')} />
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">NIM</p>
|
||||
<p className="font-bold text-slate-900">{project.nim}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Members list */}
|
||||
{project.members && project.members.length > 0 && (
|
||||
<div className="border-t border-slate-100 pt-4 mb-4">
|
||||
<div className="border-t border-slate-100 pt-3 mb-4">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
|
||||
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{project.members.map((m, i) => (
|
||||
<li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md border border-slate-100">
|
||||
<span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
|
||||
{m.nama.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
|
||||
{m.nim && <span className="text-[10px] text-slate-500 mt-1">{m.nim}</span>}
|
||||
</div>
|
||||
</li>
|
||||
<span key={i} className="bg-slate-100 text-slate-600 text-[10px] px-2.5 py-1 rounded">
|
||||
{m.nama}{m.nim ? ` (${m.nim})` : ''}
|
||||
</span>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
<div className="border-t border-slate-100 pt-4 mb-5">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{project.description}</p>
|
||||
{project.catatan && (
|
||||
<div className="mt-4 p-3 bg-blue-50/50 border border-blue-100 rounded-lg">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-blue-400 mb-1">Catatan Tambahan</p>
|
||||
<p className="text-sm text-slate-600 italic">{project.catatan}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{project.catatan && (
|
||||
<div className="mb-4 p-2.5 bg-blue-50/50 border border-blue-100 rounded-lg">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-blue-400 mb-1">Catatan Tambahan</p>
|
||||
<p className="text-xs text-slate-600 italic">{project.catatan}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project link */}
|
||||
{project.link ? (
|
||||
{project.link && (
|
||||
<a
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-primary-navy text-white font-bold rounded-lg hover:bg-untan-blue transition-colors duration-200 text-sm mb-3"
|
||||
className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#003150] text-white font-bold rounded-lg hover:bg-[#1e40af] transition-colors duration-200 text-sm"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
<ExternalLink size={14} />
|
||||
{t.project.visitLink}
|
||||
</a>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2 w-full py-3 bg-slate-100 text-slate-400 font-bold rounded-lg text-sm mb-3 cursor-not-allowed">
|
||||
<FileText size={16} />
|
||||
{t.project.noLink}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full py-2.5 border-2 border-slate-200 text-slate-600 font-bold rounded-lg hover:border-slate-300 hover:bg-slate-50 transition-colors duration-200 text-sm"
|
||||
>
|
||||
{t.modal.close}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user