feat(acaab): implementasi halaman prestasi & karya mahasiswa

2026-05-29 10:30:26 +07:00
parent 0ebc25809b
commit b8099c1dca
33 changed files with 5301 additions and 51 deletions
@@ -0,0 +1,123 @@
+import 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';
+
+interface ProjectModalProps {
+  project: Project | null;
+  onClose: () => void;
+}
+
+function InfoRow({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
+  return (
+    <div className="flex gap-2.5 items-start">
+      <span className="text-primary-gold mt-0.5 shrink-0">{icon}</span>
+      <div>
+        <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 leading-none mb-1">{label}</p>
+        <p className="text-sm font-semibold text-slate-800 leading-snug">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function ProjectModal({ project, onClose }: ProjectModalProps) {
+  const { t } = useLang();
+  if (!project) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[300] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+      aria-modal="true"
+      role="dialog"
+      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"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Image header */}
+        <div className="relative h-56 overflow-hidden rounded-t-xl bg-slate-200 shrink-0">
+          <img
+            src={project.image}
+            alt={project.title}
+            className="w-full h-full object-cover"
+            referrerPolicy="no-referrer"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+
+          {/* Close button */}
+          <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"
+          >
+            <X size={18} className="text-slate-700" />
+          </button>
+
+          {/* Category badge */}
+          {project.category && (
+            <div className="absolute bottom-4 left-4">
+              <span 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} />
+                {project.category}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          <h2 className="text-xl font-bold text-primary-navy leading-snug mb-5">{project.title}</h2>
+
+          {/* 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} />
+            )}
+            {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 && (
+              <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category} />
+            )}
+          </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>
+          </div>
+
+          {/* 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"
+            >
+              <ExternalLink size={16} />
+              {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>
+  );
+}