338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import jsPDF from 'jspdf';
|
|
import { Award, Calendar, Download, FileImage, FileText } from 'lucide-react';
|
|
import { useRef, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
const CertificateGenerator = () => {
|
|
const [studentName, setStudentName] = useState('');
|
|
const [courseName, setCourseName] = useState('');
|
|
const [completionDate, setCompletionDate] = useState('');
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [certificateSize, setCertificateSize] = useState('standard');
|
|
const [downloadFormat, setDownloadFormat] = useState('png');
|
|
const certificateRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleGenerateCertificate = async () => {
|
|
if (!studentName || !courseName || !completionDate) {
|
|
toast.error('Please fill in all required fields.');
|
|
return;
|
|
}
|
|
|
|
setIsGenerating(true);
|
|
|
|
// Simulate certificate generation
|
|
setTimeout(() => {
|
|
setIsGenerating(false);
|
|
toast.success('Your course completion certificate has been created successfully.');
|
|
}, 2000);
|
|
};
|
|
|
|
const getSizeDimensions = () => {
|
|
return certificateSize === 'a4'
|
|
? { width: 842, height: 595 } // A4 landscape
|
|
: { width: 800, height: 600 }; // Standard
|
|
};
|
|
|
|
const handleDownloadCertificate = () => {
|
|
if (!certificateRef.current) return;
|
|
|
|
if (downloadFormat === 'pdf') {
|
|
downloadAsPDF();
|
|
} else {
|
|
downloadAsPNG();
|
|
}
|
|
};
|
|
|
|
const downloadAsPNG = () => {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
if (!ctx) return;
|
|
|
|
const dimensions = getSizeDimensions();
|
|
canvas.width = dimensions.width;
|
|
canvas.height = dimensions.height;
|
|
|
|
drawCertificate(ctx, dimensions);
|
|
|
|
canvas.toBlob((blob) => {
|
|
if (!blob) return;
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${studentName}_${courseName}_Certificate.png`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
toast.success('Your PNG certificate has been saved to your downloads folder.');
|
|
}, 'image/png');
|
|
};
|
|
|
|
const downloadAsPDF = () => {
|
|
const dimensions = getSizeDimensions();
|
|
const isLandscape = dimensions.width > dimensions.height;
|
|
|
|
// Create PDF with proper dimensions
|
|
const pdf = new jsPDF({
|
|
orientation: isLandscape ? 'landscape' : 'portrait',
|
|
unit: 'px',
|
|
format: [dimensions.width, dimensions.height],
|
|
});
|
|
|
|
// Create canvas for drawing
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
if (!ctx) return;
|
|
|
|
canvas.width = dimensions.width;
|
|
canvas.height = dimensions.height;
|
|
|
|
// Draw certificate on canvas
|
|
drawCertificate(ctx, dimensions);
|
|
|
|
// Convert canvas to image and add to PDF
|
|
const imgData = canvas.toDataURL('image/png');
|
|
pdf.addImage(imgData, 'PNG', 0, 0, dimensions.width, dimensions.height);
|
|
|
|
// Save the PDF
|
|
pdf.save(`${studentName}_${courseName}_Certificate.pdf`);
|
|
|
|
toast.success('Your PDF certificate has been saved to your downloads folder.');
|
|
};
|
|
|
|
const drawCertificate = (ctx: CanvasRenderingContext2D, dimensions: { width: number; height: number }) => {
|
|
// Create gradient background
|
|
const gradient = ctx.createLinearGradient(0, 0, dimensions.width, dimensions.height);
|
|
gradient.addColorStop(0, '#dbeafe');
|
|
gradient.addColorStop(1, '#e0e7ff');
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, dimensions.width, dimensions.height);
|
|
|
|
// Add decorative border
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 8;
|
|
ctx.strokeRect(20, 20, dimensions.width - 40, dimensions.height - 40);
|
|
|
|
// Inner border
|
|
ctx.strokeStyle = '#3730a3';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(40, 40, dimensions.width - 80, dimensions.height - 80);
|
|
|
|
// Set text styles
|
|
ctx.fillStyle = '#1f2937';
|
|
ctx.textAlign = 'center';
|
|
|
|
// Title
|
|
ctx.font = 'bold 42px serif';
|
|
ctx.fillText('Certificate of Completion', dimensions.width / 2, 120);
|
|
|
|
// Decorative line under title
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(dimensions.width / 2 - 150, 140);
|
|
ctx.lineTo(dimensions.width / 2 + 150, 140);
|
|
ctx.stroke();
|
|
|
|
// "This is to certify that"
|
|
ctx.font = '22px serif';
|
|
ctx.fillStyle = '#4b5563';
|
|
ctx.fillText('This is to certify that', dimensions.width / 2, 190);
|
|
|
|
// Student name with underline
|
|
ctx.font = 'bold 36px serif';
|
|
ctx.fillStyle = '#3730a3';
|
|
ctx.fillText(studentName, dimensions.width / 2, 250);
|
|
|
|
// Underline for student name
|
|
const nameWidth = ctx.measureText(studentName).width;
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo((dimensions.width - nameWidth) / 2 - 20, 270);
|
|
ctx.lineTo((dimensions.width + nameWidth) / 2 + 20, 270);
|
|
ctx.stroke();
|
|
|
|
// "has successfully completed the course"
|
|
ctx.font = '22px serif';
|
|
ctx.fillStyle = '#4b5563';
|
|
ctx.fillText('has successfully completed the course', dimensions.width / 2, 320);
|
|
|
|
// Course name
|
|
ctx.font = 'bold 28px serif';
|
|
ctx.fillStyle = '#3730a3';
|
|
ctx.fillText(courseName, dimensions.width / 2, 370);
|
|
|
|
// Completion date
|
|
ctx.font = '18px serif';
|
|
ctx.fillStyle = '#6b7280';
|
|
ctx.fillText(`Completed on: ${completionDate}`, dimensions.width / 2, 430);
|
|
|
|
// Footer
|
|
ctx.font = '16px serif';
|
|
ctx.fillStyle = '#9ca3af';
|
|
ctx.fillText('Authorized Certificate of Achievement', dimensions.width / 2, dimensions.height - 60);
|
|
};
|
|
|
|
const currentDate = new Date().toISOString().split('T')[0];
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="text-center">
|
|
<h1 className="mb-4 text-4xl font-bold text-gray-800">Course Certificate Generator</h1>
|
|
<p className="text-muted-foreground text-lg">Generate your official course completion certificate</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
{/* Form Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Award className="h-5 w-5 text-amber-600" />
|
|
Certificate Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="studentName">Student Name *</Label>
|
|
<Input
|
|
id="studentName"
|
|
value={studentName}
|
|
onChange={(e) => setStudentName(e.target.value)}
|
|
placeholder="Enter your full name"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="courseName">Course Name *</Label>
|
|
<Input id="courseName" value={courseName} onChange={(e) => setCourseName(e.target.value)} placeholder="Enter the course name" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="completionDate">Completion Date *</Label>
|
|
<Input
|
|
id="completionDate"
|
|
type="date"
|
|
value={completionDate}
|
|
onChange={(e) => setCompletionDate(e.target.value)}
|
|
max={currentDate}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Certificate Size</Label>
|
|
<Select value={certificateSize} onValueChange={setCertificateSize}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select certificate size" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="standard">Standard (800x600)</SelectItem>
|
|
<SelectItem value="a4">A4 Landscape (842x595)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Label>Download Format</Label>
|
|
<RadioGroup value={downloadFormat} onValueChange={setDownloadFormat} className="flex space-x-6">
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem className="cursor-pointer" value="png" id="png" />
|
|
<Label htmlFor="png" className="flex cursor-pointer items-center gap-2">
|
|
<FileImage className="h-4 w-4" />
|
|
PNG Image
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem className="cursor-pointer" value="pdf" id="pdf" />
|
|
<Label htmlFor="pdf" className="flex cursor-pointer items-center gap-2">
|
|
<FileText className="h-4 w-4" />
|
|
PDF Document
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<Button onClick={handleGenerateCertificate} disabled={isGenerating} className="w-full" size="lg">
|
|
{isGenerating ? (
|
|
<>
|
|
<div className="mr-2 h-4 w-4 animate-spin rounded-full border-b-2 border-white" />
|
|
Generating Certificate...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Award className="mr-2 h-4 w-4" />
|
|
Generate Certificate
|
|
</>
|
|
)}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Preview Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Certificate Preview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
ref={certificateRef}
|
|
className={`relative flex flex-col justify-center rounded-lg border-4 border-amber-400 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 text-center`}
|
|
>
|
|
{/* Inner decorative border */}
|
|
<div className="absolute inset-4 rounded border-2 border-indigo-700"></div>
|
|
|
|
<div className="relative z-10">
|
|
<div className="mb-6">
|
|
<Award className="mx-auto mb-3 h-12 w-12 text-amber-600" />
|
|
<h2 className="mb-2 font-serif text-2xl font-bold text-gray-800">Certificate of Completion</h2>
|
|
<div className="mx-auto h-0.5 w-32 bg-amber-400"></div>
|
|
</div>
|
|
|
|
<div className="space-y-4 text-gray-700">
|
|
<p className="font-serif text-lg">This is to certify that</p>
|
|
<div className="relative">
|
|
<p className="mx-8 pb-2 font-serif text-2xl font-bold text-indigo-800">{studentName || 'Student Name'}</p>
|
|
<div className="absolute bottom-0 left-1/2 h-0.5 w-48 -translate-x-1/2 transform bg-amber-400"></div>
|
|
</div>
|
|
<p className="font-serif text-lg">has successfully completed the course</p>
|
|
<p className="font-serif text-xl font-semibold text-indigo-700">{courseName || 'Course Name'}</p>
|
|
<div className="mt-6 flex items-center justify-center gap-2">
|
|
<Calendar className="text-muted-foreground h-4 w-4" />
|
|
<p className="text-muted-foreground font-serif text-sm">Completed on: {completionDate || 'Date'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 border-t border-amber-400 pt-4">
|
|
<p className="font-serif text-sm text-gray-500">Authorized Certificate of Achievement</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{studentName && courseName && completionDate && (
|
|
<Button variant="outline" className="mt-4 w-full" onClick={handleDownloadCertificate}>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Download as {downloadFormat.toUpperCase()}
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CertificateGenerator;
|