mirror of
https://github.com/nihonbuzz/nihonbuzz-academy.git
synced 2026-01-26 05:25:37 +07:00
95 lines
5.1 KiB
TypeScript
95 lines
5.1 KiB
TypeScript
|
|
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>
|
|
);
|
|
}
|