dyzulk/nihonbuzz-academy
1
0
Fork 0
mirror of https://github.com/nihonbuzz/nihonbuzz-academy.git synced 2026-01-26 21:41:54 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement Notion-like LMS (Course Player, Exam, Certificate) with R2 integration

Browse Source
This commit is contained in:
Nihonbuzz
2026-01-24 11:11:19 +07:00
parent 594f3727f5
commit 27fc78e811
17 changed files with 1139 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
resources/js/Pages/Certificates/Show.tsx Normal file
View File

@@ -0,0 +1,94 @@
import React, { useRef } from 'react';
import { Head, Link } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Download, Share2, Home } from 'lucide-react';
// import { useReactToPrint } from 'react-to-print';
export default function ShowCertificate({ course, student, date, certificate_id }: any) {
const componentRef = useRef<HTMLDivElement>(null);
const handlePrint = () => {
window.print();
};
return (
<div className="min-h-screen bg-neutral-100 dark:bg-neutral-950 flex flex-col items-center justify-center p-4">
<Head title={`Sertifikat: ${course.title}`} />
<div className="max-w-4xl w-full space-y-8">
{/* Actions Bar */}
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 bg-white dark:bg-card p-4 rounded-xl shadow-sm border print:hidden">
<div className="flex items-center gap-4">
<Link href={route('dashboard')}>
<Button variant="ghost" size="sm">
<Home size={16} className="mr-2" />
Dashboard
</Button>
</Link>
<span className="text-muted-foreground">|</span>
<p className="text-sm font-medium">Sertifikat Kelulusan</p>
</div>
<div className="flex items-center gap-2">
<Button onClick={handlePrint} className="gap-2">
<Download size={16} />
Download PDF
</Button>
</div>
</div>
{/* Certificate Canvas */}
<div
ref={componentRef}
className="relative bg-white text-black w-full aspect-[1.414/1] shadow-2xl overflow-hidden print:shadow-none print:w-full print:h-screen print:absolute print:top-0 print:left-0"
style={{ fontFamily: "'Playfair Display', serif" }} // Ideally import a nice serif font
>
{/* Border/Frame */}
<div className="absolute inset-4 border-4 border-double border-neutral-200 pointer-events-none" />
<div className="absolute inset-6 border border-neutral-100 pointer-events-none" />
{/* Content */}
<div className="h-full flex flex-col items-center justify-center text-center p-16 space-y-8">
{/* Header */}
<div className="space-y-2">
<img src="/brand/logo-symbol.svg" alt="NihonBuzz" className="h-16 w-16 mx-auto mb-6 opacity-80" />
<p className="text-sm uppercase tracking-[0.3em] text-neutral-500 font-sans">Sertifikat Penyelesaian</p>
<h1 className="text-5xl font-bold tracking-tight text-neutral-900">NihonBuzz Academy</h1>
</div>
{/* Body */}
<div className="space-y-6 max-w-2xl">
<p className="text-lg text-neutral-600 italic">Diberikan dengan bangga kepada</p>
<h2 className="text-4xl font-black text-nihonbuzz-red underline decoration-neutral-200 underline-offset-8 decoration-1">
{student.name}
</h2>
<p className="text-neutral-600 leading-relaxed">
Atas keberhasilan menyelesaikan kursus <br />
<span className="font-bold text-neutral-900 text-xl block mt-2">{course.title}</span>
</p>
</div>
{/* Footer */}
<div className="w-full grid grid-cols-2 gap-20 pt-12 mt-12 border-t border-neutral-100 max-w-3xl">
<div className="text-center space-y-2">
<p className="font-bold text-lg">{date}</p>
<p className="text-xs uppercase tracking-widest text-neutral-400 border-t pt-2 w-32 mx-auto">Tanggal</p>
</div>
<div className="text-center space-y-2">
<img src="/signatures/director.png" className="h-10 mx-auto object-contain opacity-0" alt="Signature" /> {/* Placeholder */}
<p className="font-bold text-lg font-script">NihonBuzz Team</p>
<p className="text-xs uppercase tracking-widest text-neutral-400 border-t pt-2 w-32 mx-auto">Instruktur</p>
</div>
</div>
{/* ID */}
<div className="absolute bottom-6 left-8 text-[10px] text-neutral-300 font-mono">
ID: {certificate_id}
</div>
</div>
</div>
</div>
</div>
);
}