izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

tampilan card

Browse Source
This commit is contained in:
cw
2026-06-04 19:32:40 +07:00
parent c1b7f8cb23
commit afe7dcce3a
11 changed files with 238 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/ACAAB/src/components/ProjectModal.tsx
+55 -59
View File
@@ -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} &bull; {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>