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 | |
| #3 | export default function Template2(cert: CertificateProps) { |
| #4 | const d = cert.issueDate ? new Date(cert.issueDate) : new Date(); |
| #5 | const issueStr = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); |
| #6 | |
| #7 | return ( |
| #8 | <div |
| #9 | id="cert-render" |
| #10 | style={{ |
| #11 | width: 1056, |
| #12 | height: 816, |
| #13 | background: "#ffffff", |
| #14 | fontFamily: "'Inter', 'Helvetica Neue', sans-serif", |
| #15 | display: "flex", |
| #16 | flexDirection: "column", |
| #17 | alignItems: "center", |
| #18 | justifyContent: "center", |
| #19 | position: "relative", |
| #20 | boxSizing: "border-box", |
| #21 | border: "1px solid #e5e5e5", |
| #22 | }} |
| #23 | > |
| #24 | <div style={{ textAlign: "center", padding: "40px 100px", zIndex: 1 }}> |
| #25 | <p style={{ fontSize: 12, letterSpacing: 8, textTransform: "uppercase", color: "#aaa", marginBottom: 40 }}> |
| #26 | Certificate |
| #27 | </p> |
| #28 | <h2 style={{ fontSize: 72, fontWeight: 300, color: "#222", margin: "0 0 20px", letterSpacing: -1 }}> |
| #29 | {cert.recipientName} |
| #30 | </h2> |
| #31 | <div style={{ width: 40, height: 1, background: "#ddd", margin: "0 auto 32px" }} /> |
| #32 | <p style={{ fontSize: 20, fontWeight: 500, color: "#444", marginBottom: 12 }}> |
| #33 | {cert.courseTitle} |
| #34 | </p> |
| #35 | <p style={{ fontSize: 14, color: "#999", marginBottom: 40 }}> |
| #36 | {cert.customText || "For outstanding completion of the program"} |
| #37 | </p> |
| #38 | <div style={{ display: "flex", justifyContent: "center", gap: 60, marginTop: 24 }}> |
| #39 | <div style={{ textAlign: "center" }}> |
| #40 | <p style={{ fontSize: 11, color: "#bbb", textTransform: "uppercase", letterSpacing: 2 }}>Issued by</p> |
| #41 | <p style={{ fontSize: 15, color: "#555", marginTop: 4 }}>{cert.organization}</p> |
| #42 | </div> |
| #43 | <div style={{ textAlign: "center" }}> |
| #44 | <p style={{ fontSize: 11, color: "#bbb", textTransform: "uppercase", letterSpacing: 2 }}>Date</p> |
| #45 | <p style={{ fontSize: 15, color: "#555", marginTop: 4 }}>{issueStr}</p> |
| #46 | </div> |
| #47 | </div> |
| #48 | <p style={{ fontSize: 10, color: "#ccc", marginTop: 40 }}> |
| #49 | {cert.id} |
| #50 | </p> |
| #51 | </div> |
| #52 | </div> |
| #53 | ); |
| #54 | } |
| #55 |