// cert-templates.jsx — Visual certificate & badge templates // Each template is a self-contained SVG-based component. // ───────────────────────────────────────────── // TIER CERTIFICATION TEMPLATE // ───────────────────────────────────────────── function TierCertificate({ tierKey, tierData, earned, name, cohort, cohortName, issueDate }) { const color = tierData.color; const bg = '#0E0D1B'; const tierNum = ['entry','builder','prime','elite','apex'].indexOf(tierKey) + 1; const certCode = `EXO-TIER-${tierData.short}-${(cohort || COHORT.code).replace(/[^A-Z0-9]/gi,'').toUpperCase()}`; const displayName = name || (typeof ME !== 'undefined' ? ME.name : null) || 'Exonaut'; const displayDate = issueDate || (earned ? new Date().toLocaleDateString('en-US',{ month:'short', day:'numeric', year:'numeric' }).toUpperCase() : null); // ── LinkedIn share caption ────────────────────────────────────────────── const linkedInCaption = [ `🎖️ Just earned the ${tierData.label} tier at Exoasia Innovation Hub!`, '', `The Exonaut Program is a 12-week internship with real world experience — no simulations, just actual client work across AI strategy, venture building, L&D, and more.`, '', `${cohortName || 'Batch 2026–2027'} · Exoasia Innovation Hub · Philippines 🇵🇭`, '', '#Exonaut #ExoasiaHub #Innovation #Philippines #AITransformation', ].join('\n'); const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexoasia.hub%2Fcerts%2F${encodeURIComponent(certCode)}`; // ── State ─────────────────────────────────────────────────────────────── const [showShareModal, setShowShareModal] = React.useState(false); const [copied, setCopied] = React.useState(false); const [downloading, setDownloading] = React.useState(false); const svgRef = React.useRef(null); // ── Copy caption ───────────────────────────────────────────────────────── function copyCaption() { navigator.clipboard.writeText(linkedInCaption).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2200); }).catch(() => { // Fallback for browsers without clipboard API const ta = document.createElement('textarea'); ta.value = linkedInCaption; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); setCopied(true); setTimeout(() => setCopied(false), 2200); }); } // ── Download PNG ───────────────────────────────────────────────────────── // Serialises the SVG → Blob URL → Image → Canvas (2×) → PNG download. function downloadPng() { const svg = svgRef.current; if (!svg || downloading) return; setDownloading(true); // Clone the SVG so we can embed an explicit width/height (required by some browsers) const clone = svg.cloneNode(true); clone.setAttribute('width', '720'); clone.setAttribute('height', '440'); clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); const svgString = new XMLSerializer().serializeToString(clone); const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const url = URL.createObjectURL(blob); const img = new Image(); const scale = 2; // retina img.onload = () => { const canvas = document.createElement('canvas'); canvas.width = 720 * scale; canvas.height = 440 * scale; const ctx = canvas.getContext('2d'); ctx.scale(scale, scale); ctx.drawImage(img, 0, 0); URL.revokeObjectURL(url); const a = document.createElement('a'); a.download = `${certCode}.png`; a.href = canvas.toDataURL('image/png'); document.body.appendChild(a); a.click(); document.body.removeChild(a); setDownloading(false); }; img.onerror = () => { URL.revokeObjectURL(url); setDownloading(false); alert('PNG export failed — please try again or screenshot the certificate directly.'); }; img.src = url; } return (
{/* Certificate SVG */} {/* ── Background ── */} {/* ── Borders ── */} {/* ── Corner brackets ── */} {[ [10,10, 55,10, 10,55], [665,10, 710,10, 710,55], [10,385, 10,430, 55,430], [665,430,710,430,710,385], ].map(([x1,y1,x2,y2,x3,y3], i) => ( ))} {/* ── Header row ── */} EXOASIA INNOVATION HUB {cohortName ? cohortName.toUpperCase() : 'EXONAUT PROGRAM'} · {cohort || COHORT.code} {/* ── Left panel: Shield emblem ── */} {tierData.short} TIER {tierNum} / 5 {[0,1,2,3,4].map(i => ( ))} {certCode} {/* ── Vertical divider ── */} {/* ── Right panel: Certificate text ── */} This certifies that {displayName} has achieved the rank of {/* Tier label — always "EXONAUT"; tier identity lives on the shield badge */} EXONAUT {tierData.min != null ? `UNLOCKED AT ${tierData.min} PTS` : 'AWARDED BY MISSION COMMANDER'} {/* ── Divider line ── */} {/* ── Footer: date + signature ── */} {displayDate ? `ISSUED · ${displayDate}` : 'NOT YET EARNED'} {certCode} Mack Comandante MISSION COMMANDER {/* ── LOCKED watermark ── */} {!earned && ( LOCKED )} {/* ── Bottom strip ── */} {(cohortName || 'BATCH 2026–2027').toUpperCase()} · EXONAUT PROGRAM · EXOASIA INNOVATION HUB · PHILIPPINES {/* ── Actions (below cert) ── */} {earned && (
{/* Share on LinkedIn → opens caption modal */} {/* Download PNG */}
)} {/* ── LinkedIn share modal ── */} {showShareModal && (
{ if (e.target === e.currentTarget) setShowShareModal(false); }} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.72)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:9999 }}>
{/* Modal header */}
SHARE ON LINKEDIN
{/* Instruction */}

Copy the caption below, then paste it into your LinkedIn post after the share dialog opens.

{/* Caption textarea */}