{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "ratings-award-wall",
  "title": "Ratings — Award Wall",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/ratings-award-wall/ratings-award-wall.component.ts",
      "content": "// Grid of third-party awards, each naming the awarding body, the category, and the\n// period it covers, so a badge wall stays checkable rather than decorative. Port of the\n// React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Award, LucideAngularModule } 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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface AwardEntry {\n  body: string\n  category: string\n  period: string\n}\n\n// Body, category, and period on every entry. A badge without a period is a\n// badge that could be six years old.\nconst awards: AwardEntry[] = [\n  { body: 'G2', category: 'Leader — Analytics Platforms', period: 'Winter 2026' },\n  { body: 'G2', category: 'Best Usability — Mid-Market', period: 'Winter 2026' },\n  { body: 'Capterra', category: 'Best Value — Business Intelligence', period: '2025' },\n  { body: 'TrustRadius', category: 'Top Rated — Data Governance', period: '2025' },\n  { body: 'Product Hunt', category: '#1 Product of the Day', period: 'Mar 2025' },\n  { body: 'SaaS Awards', category: 'Best Data Product, shortlisted', period: '2025' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-ratings-award-wall, [ui-ratings-award-wall]',\n  standalone: true,\n  // The block renders its own root <section>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"ratings-award-wall\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div class=\"max-w-2xl\">\n            <span ui-badge variant=\"secondary\">Recognition</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Awarded, with the period attached</h2>\n            <p class=\"text-muted-foreground mt-3 text-lg\">\n              Every entry names who gave it, for what, and when. Nothing here is older than a year unless it says so.\n            </p>\n          </div>\n          <button ui-button variant=\"outline\">See the review profiles</button>\n        </div>\n\n        <div class=\"mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          @for (award of awards; track award.body + award.category) {\n            <div ui-card>\n              <div ui-card-content class=\"flex h-full flex-col p-5\">\n                <div class=\"flex items-center gap-3\">\n                  <span\n                    class=\"border-border text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-lg border\"\n                    aria-hidden=\"true\"\n                  >\n                    <lucide-icon [img]=\"Award\" class=\"size-4\" />\n                  </span>\n                  <p class=\"text-sm font-semibold\">{{ award.body }}</p>\n                </div>\n                <ui-separator class=\"my-4\" />\n                <p class=\"text-sm leading-snug\">{{ award.category }}</p>\n                <p class=\"text-muted-foreground mt-auto pt-3 font-mono text-xs\">{{ award.period }}</p>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiRatingsAwardWallComponent {\n  protected readonly Award = Award\n  protected readonly awards = awards\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/ratings-award-wall/ratings-award-wall.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/ratings-award-wall/index.ts",
      "content": "export { UiRatingsAwardWallComponent } from './ratings-award-wall.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/ratings-award-wall/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/separator.json"
  ],
  "description": "Grid of third-party awards, each naming the awarding body, the category, and the period it covers, so a badge wall stays checkable rather than decorative.",
  "categories": [
    "marketing"
  ]
}