{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "use-cases-industry-grid", "title": "Use Cases — Industry Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/use-cases-industry-grid/use-cases-industry-grid.component.ts", "content": "// Filterable industry use-case grid: segment chips narrow a six-card grid in place,\n// each card carrying an icon, industry label, outcome headline, proof metric, and a\n// quiet read-more link. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowUpRight,\n Banknote,\n Factory,\n HeartPulse,\n LucideAngularModule,\n Ship,\n ShoppingCart,\n Truck,\n} 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 } from '@/ui/card/card.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\ninterface IndustryUseCase {\n icon: unknown\n segment: string\n title: string\n body: string\n metric: string\n}\n\nconst useCases: IndustryUseCase[] = [\n {\n icon: Banknote,\n segment: 'Financial services',\n title: 'Close the books without a spreadsheet relay',\n body: 'Ledger-reconciled metrics that lock on period close, with an auditable trail for every restatement.',\n metric: '5 days off close',\n },\n {\n icon: HeartPulse,\n segment: 'Healthcare',\n title: 'Report on care quality without exposing PHI',\n body: 'Row-level scoping evaluated per query, so a shared dashboard never leaks a chart the viewer cannot open.',\n metric: 'HIPAA-scoped by default',\n },\n {\n icon: ShoppingCart,\n segment: 'Retail',\n title: 'One margin definition across every channel',\n body: 'Store, marketplace, and wholesale roll up to the same certified metric instead of three competing exports.',\n metric: '3 channels, 1 number',\n },\n {\n icon: Truck,\n segment: 'Logistics',\n title: 'Track service levels against the contract',\n body: 'On-time thresholds encoded per customer contract, so breach reporting stops being a manual comparison.',\n metric: '98.2% SLA visibility',\n },\n {\n icon: Factory,\n segment: 'Manufacturing',\n title: 'Yield reporting that survives a line change',\n body: 'Definitions version with the production line, so last quarter’s numbers stay comparable after a retool.',\n metric: '12 lines reconciled',\n },\n {\n icon: Ship,\n segment: 'Logistics',\n title: 'Landed cost per shipment, not per guess',\n body: 'Freight, duty, and demurrage join at query time against the booking rather than a monthly allocation.',\n metric: 'Per-shipment costing',\n },\n]\n\nconst ALL = 'All'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-industry-grid, [ui-use-cases-industry-grid]',\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 UiToggleGroupComponent,\n UiToggleGroupItemComponent,\n ],\n template: `\n
\n
\n
\n
\n By industry\n

Where teams start

\n

\n Six rollouts we run often enough to have opinions about. Filter to yours.\n

\n
\n\n \n @for (segment of segments(); track segment) {\n \n }\n
\n
\n\n
\n @for (useCase of visible(); track useCase.title) {\n
\n
\n \n

\n {{ useCase.segment }}\n

\n

{{ useCase.title }}

\n

{{ useCase.body }}

\n\n
\n {{ useCase.metric }}\n \n
\n
\n
\n }\n
\n \n
\n `,\n})\nexport class UiUseCasesIndustryGridComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n\n @Input('class') className?: string\n @Input() set initialSegment(v: string | undefined) {\n if (v) this.active.set(v)\n }\n\n readonly active = signal(ALL)\n readonly segments = computed(() => [ALL, ...new Set(useCases.map((u) => u.segment))])\n readonly visible = computed(() =>\n this.active() === ALL ? useCases : useCases.filter((u) => u.segment === this.active()),\n )\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n // ToggleGroup single-select emits '' when the active item is pressed again;\n // fall back to ALL so the grid can never end up empty.\n onSegmentChange(value: unknown): void {\n this.active.set(typeof value === 'string' && value ? value : ALL)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases-industry-grid/use-cases-industry-grid.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases-industry-grid/index.ts", "content": "export { UiUseCasesIndustryGridComponent } from './use-cases-industry-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases-industry-grid/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", "https://uipkge.dev/r/angular/toggle-group.json" ], "description": "Filterable industry use-case grid: segment chips narrow a six-card grid in place, each card carrying an icon, industry label, outcome headline, proof metric, and a quiet read-more link.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "use-cases" }