Files
atomic-design-poc/src/app/organisms/site-footer/site-footer.component.ts
Claude f1f4f982a6 Full-width layout, page-shell template, httpResource async states, README
- Fix full-bleed header/footer (align-items:stretch + block hosts; centered
  content column via shared --app-content-max).
- New templates/page-shell (back-link + heading + intro + content, narrow mode);
  all pages refactored to compose it.
- Async state management with native httpResource + <app-async> wrapper that
  renders exactly one of loading/empty/error/loaded (impossible states
  unrepresentable); delayed spinner + skeleton atoms for slow/fast connections.
- Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state.
- Storybook: spinner/skeleton/page-shell/async-states stories.
- README rewritten as a guide (atomic design, reuse benefits, state handling).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-25 14:53:28 +02:00

18 lines
724 B
TypeScript

import { Component } from '@angular/core';
/** Organism: site footer. */
@Component({
selector: 'app-site-footer',
styles: [':host{display:block}'],
template: `
<footer class="utrecht-page-footer" style="background:var(--rhc-color-lintblauw-900,#01689b);color:#fff;margin-top:3rem;width:100%">
<div style="max-width:var(--app-content-max);margin:0 auto;padding:1.5rem;display:flex;gap:2rem;flex-wrap:wrap;box-sizing:border-box">
<span>BIG-register</span>
<span>CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</span>
<span style="margin-left:auto;opacity:0.85">Demo / POC — geen echte gegevens</span>
</div>
</footer>
`,
})
export class SiteFooterComponent {}