{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"certificate-view","type":"registry:ui","title":"CertificateView","description":"An issued certificate and its verification code. Deliberately literal-coloured so it looks the same on every theme.","package":"classroom","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/certificate-view\/CertificateView.tsx","content":"import { Button, Card, Heading, Text } from '@particle-academy\/react-fancy';\r\nimport type { Certificate } from '..\/types';\r\n\r\nexport interface CertificateViewProps {\r\n    certificate: Certificate;\r\n    pdfUrl: string;\r\n    recipientName?: string;\r\n    programTitle?: string;\r\n}\r\n\r\nexport function CertificateView({\r\n    certificate,\r\n    pdfUrl,\r\n    recipientName,\r\n    programTitle,\r\n}: CertificateViewProps) {\r\n    return (\r\n        <Card\r\n            variant=\"outlined\"\r\n            padding=\"none\"\r\n            className=\"!rounded-xl !border-zinc-200 !bg-white !shadow-sm overflow-hidden\"\r\n        >\r\n            <div\r\n                className=\"text-center p-8 sm:p-12 bg-[#fdfaf3] m-3 rounded-lg\"\r\n                style={{ border: '8px double #b08d57' }}\r\n            >\r\n                <Text\r\n                    size=\"sm\"\r\n                    weight=\"semibold\"\r\n                    className=\"uppercase tracking-[0.4em] !text-[#8a6d3b]\"\r\n                >\r\n                    Certificate of Completion\r\n                <\/Text>\r\n                <Heading\r\n                    as=\"h1\"\r\n                    size=\"2xl\"\r\n                    weight=\"bold\"\r\n                    className=\"mt-4 !text-[#2f2517] !text-3xl sm:!text-4xl\"\r\n                >\r\n                    {programTitle ?? 'Course Completion'}\r\n                <\/Heading>\r\n                <Text className=\"mt-6 !text-[#5b4a33]\">This is to certify that<\/Text>\r\n                <Heading\r\n                    as=\"h2\"\r\n                    size=\"xl\"\r\n                    weight=\"bold\"\r\n                    className=\"!mt-3 !text-[#2f2517]\"\r\n                    style={{ fontStyle: 'italic' }}\r\n                >\r\n                    {recipientName ?? 'Learner'}\r\n                <\/Heading>\r\n                <Text className=\"mt-3 !text-[#5b4a33]\">\r\n                    has successfully completed the program.\r\n                <\/Text>\r\n                <Text size=\"sm\" color=\"muted\" className=\"!mt-6\">\r\n                    Issued {new Date(certificate.issued_at).toLocaleDateString()} \u00b7 Verification{' '}\r\n                    <span className=\"font-mono\">{certificate.verification_code}<\/span>\r\n                <\/Text>\r\n            <\/div>\r\n            <div className=\"px-6 py-4 border-t border-secondary-200 bg-secondary-50\/50 flex justify-center gap-3\">\r\n                <Button\r\n                    href={pdfUrl}\r\n                    className=\"!bg-brand hover:!bg-primary-600 !text-white !font-semibold !px-6 !py-2.5 !rounded-md !shadow-sm\"\r\n                >\r\n                    Download PDF\r\n                <\/Button>\r\n            <\/div>\r\n        <\/Card>\r\n    );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/certificate-view\/CertificateView.tsx"}]}