{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "certificate-credential-card", "title": "Certificate Credential Card", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/certificate-credential-card/certificate-credential-card.component.ts", "content": "// Digital diploma and verified credential card: ornamental certificate container,\n// cryptographic seal with QR verification, honors distinction, validated skill pills,\n// instructor signatures, and social sharing. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport { Award, Check, Copy, Download, ExternalLink, LucideAngularModule, Share2, ShieldCheck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent, UiCardHeaderComponent } from '@/ui/card/card.component'\n\nconst credentialData = {\n certId: 'CERT-2026-984210',\n institution: 'UIPKGE Engineering Academy',\n motto: 'EXCELLENTIA IN ARCHITECTURA',\n type: 'Professional Certificate of Mastery in Full-Stack UI Engineering',\n recipientName: 'Elena Rostova',\n achievementDescription:\n 'For demonstrating advanced mastery in headless component architecture, OKLCH token systems, accessibility compliance, and dual-framework engineering.',\n issueDate: 'August 21, 2026',\n expiration: 'No Expiration · Lifetime Validity',\n skills: ['Vue 3.5', 'React 19', 'TypeScript', 'Tailwind v4', 'Reka UI', 'WCAG AA A11y'],\n leadInstructor: {\n name: 'Dr. Marcus Vance',\n title: 'Lead Instructor & Distinguished Architect',\n },\n academicDean: {\n name: 'Sarah Jenkins, Ph.D.',\n title: 'Academic Dean of Engineering',\n },\n sha256Digest: '7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069',\n verifyUrl: 'https://uipkge.dev/verify/CERT-2026-984210',\n blockLedger: 'Block #19,482,019 (OpenAttestation v3)',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-certificate-credential-card, [ui-certificate-credential-card]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n Verified Credential\n \n \n \n \n \n \n Authentic · Cryptographically Signed\n
\n
\n\n
\n

\n Verified Credential & Certificate of Mastery\n

\n
\n Credential ID:\n \n #{{ data.certId }}\n @if (copiedCertId()) {\n \n } @else {\n \n }\n \n Issued {{ data.issueDate }}\n
\n
\n
\n\n
\n \n \n \n {{ downloadingPdf() ? 'Generating PDF...' : 'Download High-Res PDF' }}\n \n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n

\n {{ data.institution }}\n

\n

{{ data.motto }}

\n
\n\n
\n \n \n Accredited Diploma\n \n \n
\n \n\n
\n

\n This is to certify that\n

\n

\n {{ data.recipientName }}\n

\n

\n has successfully fulfilled all rigorous requirements and demonstrated distinguished mastery in\n

\n
\n

\n {{ data.type }}\n

\n
\n

\n {{ data.achievementDescription }}\n

\n \n \n Conferred with Highest Distinction · Top 1% Cohort · 480 CEU Hours\n
\n \n\n
\n

\n Validated Competencies & Technical Proficiencies\n

\n
\n @for (skill of data.skills; track skill) {\n \n \n {{ skill }}\n \n }\n
\n
\n\n \n
\n Issue Date\n

{{ data.issueDate }}

\n
\n
\n Validity\n

{{ data.expiration }}

\n
\n
\n Credential Status\n

Active · Verified

\n
\n \n\n
\n
\n
\n \n \n \n \n
\n
\n

{{ data.leadInstructor.name }}

\n

{{ data.leadInstructor.title }}

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n VERIFIED\n
\n
\n
\n

Scan to Verify Authenticity

\n
\n\n
\n
\n \n \n \n \n
\n
\n

{{ data.academicDean.name }}

\n

{{ data.academicDean.title }}

\n
\n
\n \n \n \n \n \n\n \n
\n
\n
\n \n \n Tamper-Proof Credential · W3C Verifiable Credentials &\n {{ data.blockLedger }}\n \n
\n\n
\n
\n SHA-256:\n \n 7f83b1...126d9069\n @if (copiedDigest()) {\n \n } @else {\n \n }\n \n
\n\n \n {{ copiedVerifyUrl() ? 'URL Copied' : 'Copy Verification URL' }}\n @if (copiedVerifyUrl()) {\n \n } @else {\n \n }\n \n
\n
\n
\n \n `,\n})\nexport class UiCertificateCredentialCardComponent {\n protected readonly Award = Award\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n\n protected readonly data = credentialData\n\n @Input('class') className?: string\n\n readonly copiedCertId = signal(false)\n readonly copiedVerifyUrl = signal(false)\n readonly copiedDigest = signal(false)\n readonly sharedLinkedIn = signal(false)\n readonly downloadingPdf = signal(false)\n\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n private flash(flag: ReturnType>, ms: number): void {\n flag.set(true)\n this.timers.push(setTimeout(() => flag.set(false), ms))\n }\n\n copyCertId(): void {\n try {\n void navigator.clipboard?.writeText(credentialData.certId)\n } catch {\n // Clipboard unavailable in some contexts; the check icon still confirms the intent.\n }\n this.flash(this.copiedCertId, 2000)\n }\n\n copyVerifyUrl(): void {\n try {\n void navigator.clipboard?.writeText(credentialData.verifyUrl)\n } catch {\n // ignore\n }\n this.flash(this.copiedVerifyUrl, 2000)\n }\n\n copyDigest(): void {\n try {\n void navigator.clipboard?.writeText(credentialData.sha256Digest)\n } catch {\n // ignore\n }\n this.flash(this.copiedDigest, 2000)\n }\n\n handleLinkedInShare(): void {\n const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(credentialData.verifyUrl)}`\n try {\n window.open(url, '_blank', 'noopener,noreferrer')\n } catch {\n // ignore\n }\n this.flash(this.sharedLinkedIn, 2500)\n }\n\n handleDownloadPdf(): void {\n this.flash(this.downloadingPdf, 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/certificate-credential-card/certificate-credential-card.component.ts" }, { "path": "packages/registry-angular/blocks/certificate-credential-card/index.ts", "content": "export { UiCertificateCredentialCardComponent } from './certificate-credential-card.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/certificate-credential-card/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Digital diploma and verified credential card featuring ornamental certificate container, cryptographic seal with QR code verification, recipient honors, validated skill pills, instructor signatures, and social sharing.", "categories": [ "education", "app", "card" ] }