Footer Developer Dense Grid

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface DeveloperFooterColumn {
  title: string
  links: { label: string; href: string; badge?: string }[]
}

Files installed (2)

• src/app/components/blocks/footer-developer-dense-grid/footer-developer-dense-grid.component.ts6.7 kB

  Copy

  // Dense developer footer with multi-column categorized links, live operational status
  // beacon, and social triggers. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { Github, Globe, LucideAngularModule, Twitter } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiButtonComponent } from '@/ui/button/button.component'
  
  export interface DeveloperFooterColumn {
    title: string
    links: { label: string; href: string; badge?: string }[]
  }
  
  const columns: DeveloperFooterColumn[] = [
    {
      title: 'UI Primitives',
      links: [
        { label: 'Button & Controls', href: '#' },
        { label: 'Dialog & Overlays', href: '#' },
        { label: 'Data Table & Virtual', href: '#' },
        { label: 'Charts & Sparklines', href: '#' },
        { label: 'Form Controls & Inputs', href: '#' },
        { label: 'KpiGrid & Metric Tiles', href: '#' },
      ],
    },
    {
      title: 'Marketing Blocks',
      links: [
        { label: 'Hero Sandboxes', href: '#' },
        { label: 'Feature Workbenches', href: '#' },
        { label: 'Pricing Matrix & ROI', href: '#' },
        { label: 'Social Proof Tickers', href: '#' },
        { label: 'Testimonial Masonry', href: '#' },
        { label: 'Interactive Demos', href: '#', badge: 'New' },
      ],
    },
    {
      title: 'Ecosystem Templates',
      links: [
        { label: 'HRMS Nuxt Template', href: '#' },
        { label: 'HMS Clinical Dashboard', href: '#' },
        { label: 'Shipment Tracking Live', href: '#' },
        { label: 'Fintech Banking Portal', href: '#' },
        { label: 'AI LLM Workspace', href: '#' },
      ],
    },
    {
      title: 'Developer DX',
      links: [
        { label: 'CLI Installation Guide', href: '#' },
        { label: 'Tailwind CSS v4 Tokens', href: '#' },
        { label: 'Dual-Framework Parity', href: '#' },
        { label: 'Reka UI Primitives', href: '#' },
        { label: 'Radix UI Primitives', href: '#' },
        { label: 'Changelog Timeline', href: '#' },
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-footer-developer-dense-grid, [ui-footer-developer-dense-grid]',
    standalone: true,
    // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiButtonComponent],
    template: `
      <footer data-slot="footer-developer-dense-grid" [class]="rootClass">
        <div class="mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
          <!-- Top Grid: Brand & Categorized Columns -->
          <div class="grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12">
            <!-- Brand Info (4 Cols) -->
            <div class="col-span-2 space-y-4 md:col-span-6 lg:col-span-4">
              <div class="flex items-center gap-2 font-mono text-base font-bold tracking-tight">
                <span
                  class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs"
                >
                  U
                </span>
                <span>UIPKGE.DEV</span>
              </div>
  
              <p class="text-muted-foreground max-w-sm text-xs leading-relaxed">
                The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens,
                pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.
              </p>
  
              <!-- Social links -->
              <div class="flex items-center gap-2 pt-2">
                <button ui-button size="sm" variant="outline" class="size-8 rounded-lg p-0" aria-label="GitHub">
                  <lucide-icon [img]="Github" class="size-3.5" />
                </button>
                <button ui-button size="sm" variant="outline" class="size-8 rounded-lg p-0" aria-label="Twitter">
                  <lucide-icon [img]="Twitter" class="size-3.5" />
                </button>
                <button ui-button size="sm" variant="outline" class="size-8 rounded-lg p-0" aria-label="Website">
                  <lucide-icon [img]="Globe" class="size-3.5" />
                </button>
              </div>
            </div>
  
            <!-- 4 Links Columns (8 Cols total, 2 cols each) -->
            @for (col of columnList; track col.title) {
              <div class="col-span-1 space-y-3 md:col-span-3 lg:col-span-2">
                <h4 class="text-foreground font-mono text-xs font-bold tracking-wider uppercase">
                  {{ col.title }}
                </h4>
                <ul class="text-muted-foreground space-y-2 font-mono text-xs">
                  @for (link of col.links; track link.label) {
                    <li>
                      <a
                        [href]="link.href"
                        class="hover:text-foreground inline-flex items-center gap-1.5 transition-colors"
                      >
                        <span>{{ link.label }}</span>
                        @if (link.badge) {
                          <span class="py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase">
                            {{ link.badge }}
                          </span>
                        }
                      </a>
                    </li>
                  }
                </ul>
              </div>
            }
          </div>
  
          <!-- Bottom Operational Status & Copyright Bar -->
          <div
            class="border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left"
          >
            <!-- Live System Telemetry Status -->
            <div class="flex items-center gap-2.5">
              <span class="relative flex size-2">
                <span class="bg-success absolute inline-flex h-full w-full rounded-full opacity-75"></span>
                <span class="bg-success relative inline-flex size-2 rounded-full"></span>
              </span>
              <span class="text-foreground font-medium">All Global Edge Nodes Operational</span>
              <span class="text-muted-foreground/60">&bull; Latency: 14ms (P99)</span>
            </div>
  
            <!-- Right Copyright & MIT Notice -->
            <div class="flex items-center gap-3">
              <span>MIT Licensed &bull; Unbundled Code</span>
              <span>&copy; {{ currentYear }} UIPKGE</span>
            </div>
          </div>
        </div>
      </footer>
    `,
  })
  export class UiFooterDeveloperDenseGridComponent {
    protected readonly Github = Github
    protected readonly Globe = Globe
    protected readonly Twitter = Twitter
  
    protected readonly columnList = columns
    protected readonly currentYear = new Date().getFullYear()
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('border-border bg-card/60 text-foreground border-t backdrop-blur-md', this.className)
    }
  }
  

• src/app/components/blocks/footer-developer-dense-grid/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/footer-developer-dense-grid.json