repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
certificates
stars
latest
clone command
git clone gitlawb://did:key:z6Mkqhmm...XL9c/certificatesgit clone gitlawb://did:key:z6Mkqhmm.../certificates019974a8sync from playground15h ago| #1 | import type { CertificateProps } from "../types"; |
| #2 | import Template1 from "../templates/Template1"; |
| #3 | import Template2 from "../templates/Template2"; |
| #4 | import Template3 from "../templates/Template3"; |
| #5 | import Template4 from "../templates/Template4"; |
| #6 | import Template5 from "../templates/Template5"; |
| #7 | import Template6 from "../templates/Template6"; |
| #8 | import Template7 from "../templates/Template7"; |
| #9 | import Template8 from "../templates/Template8"; |
| #10 | import Template9 from "../templates/Template9"; |
| #11 | import Template10 from "../templates/Template10"; |
| #12 | import CustomTemplateRenderer from "./CustomTemplateRenderer"; |
| #13 | |
| #14 | const templateMap: Record<string, React.FC<CertificateProps>> = { |
| #15 | "1": Template1, |
| #16 | "2": Template2, |
| #17 | "3": Template3, |
| #18 | "4": Template4, |
| #19 | "5": Template5, |
| #20 | "6": Template6, |
| #21 | "7": Template7, |
| #22 | "8": Template8, |
| #23 | "9": Template9, |
| #24 | "10": Template10, |
| #25 | }; |
| #26 | |
| #27 | function UploadedCertImage({ cert }: { cert: CertificateProps }) { |
| #28 | if (!cert.fileData) { |
| #29 | return ( |
| #30 | <div className="w-full h-full flex items-center justify-center bg-gray-100 text-gray-400 text-sm"> |
| #31 | No image data available |
| #32 | </div> |
| #33 | ); |
| #34 | } |
| #35 | return ( |
| #36 | <img |
| #37 | src={cert.fileData} |
| #38 | alt={`Certificate for ${cert.recipientName}`} |
| #39 | className="w-full h-full object-contain" |
| #40 | style={{ maxWidth: "100%", maxHeight: "100%" }} |
| #41 | /> |
| #42 | ); |
| #43 | } |
| #44 | |
| #45 | export default function CertificateCard({ |
| #46 | cert, |
| #47 | scale = 1, |
| #48 | }: { |
| #49 | cert: CertificateProps; |
| #50 | scale?: number; |
| #51 | }) { |
| #52 | if (cert.certType === "uploaded") { |
| #53 | return ( |
| #54 | <div |
| #55 | style={{ |
| #56 | transform: `scale(${scale})`, |
| #57 | transformOrigin: "top left", |
| #58 | width: 1056 * scale, |
| #59 | height: 816 * scale, |
| #60 | }} |
| #61 | > |
| #62 | <UploadedCertImage cert={cert} /> |
| #63 | </div> |
| #64 | ); |
| #65 | } |
| #66 | |
| #67 | const isCustom = cert.templateId.startsWith("c"); |
| #68 | const Template = isCustom ? null : templateMap[cert.templateId] || Template1; |
| #69 | |
| #70 | return ( |
| #71 | <div |
| #72 | style={{ |
| #73 | transform: `scale(${scale})`, |
| #74 | transformOrigin: "top left", |
| #75 | width: 1056 * scale, |
| #76 | height: 816 * scale, |
| #77 | }} |
| #78 | > |
| #79 | {isCustom ? <CustomTemplateRenderer {...cert} /> : <Template {...cert} />} |
| #80 | </div> |
| #81 | ); |
| #82 | } |
| #83 |