{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "use-cases-role-cards", "title": "Use Cases Role Cards", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/use-cases-role-cards/use-cases-role-cards.component.ts", "content": "// Grid of role cards, each stating the job to be done, the first week of work,\n// and the metric that role is measured on, so a reader can self-select without\n// a tab interaction. Port of the React block 1:1 (static, no client state).\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowUpRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface RoleCard {\n initials: string\n role: string\n job: string\n week: string\n metric: string\n}\n\nconst roles: RoleCard[] = [\n {\n initials: 'FC',\n role: 'Financial controller',\n job: 'Close the books without a reconciliation relay.',\n week: 'Reconcile revenue and margin against the ledger, then lock the period.',\n metric: 'Days to close',\n },\n {\n initials: 'AL',\n role: 'Analytics lead',\n job: 'Stop being a query queue for the rest of the company.',\n week: 'Publish the ten numbers that generate the most tickets as certified metrics.',\n metric: 'Ad-hoc requests per month',\n },\n {\n initials: 'RO',\n role: 'RevOps',\n job: 'Make forecast review about the forecast.',\n week: 'Agree one pipeline definition with finance and snapshot it weekly.',\n metric: 'Forecast accuracy band',\n },\n {\n initials: 'DE',\n role: 'Data engineer',\n job: 'Stop owning an undocumented reporting service.',\n week: 'Move definitions into the repo and delete the bespoke extract jobs.',\n metric: 'Pipelines maintained',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-role-cards, [ui-use-cases-role-cards]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n By role\n

Find the card with your job on it

\n

\n Each one names the work of the first week and the number that role is actually judged on.\n

\n
\n\n
\n @for (role of roles; track role.role) {\n
\n
\n
\n \n {{ role.initials }}\n \n

{{ role.role }}

\n
\n\n

{{ role.job }}

\n\n \n\n

First week

\n

{{ role.week }}

\n\n
\n \n Measured on \n {{ role.metric }}\n \n \n
\n
\n
\n }\n
\n
\n
\n `,\n})\nexport class UiUseCasesRoleCardsComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly roles = roles\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases-role-cards/use-cases-role-cards.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases-role-cards/index.ts", "content": "export { UiUseCasesRoleCardsComponent } from './use-cases-role-cards.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases-role-cards/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Grid of role cards, each stating the job to be done, the first week of work, and the metric that role is measured on, so a reader can self-select without a tab interaction.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "use-cases" }