feat: add Angular frontend skeleton

2026-04-29 12:17:07 +02:00
parent 35ae0278b7
commit 5f30029f4b
20 changed files with 818 additions and 3 deletions
@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  standalone: true,
+  imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Show detail</p>
+        <h1>{{ slug | titlecase }}</h1>
+        <p class="supporting">
+          This placeholder will bind to the public show detail and performance endpoints.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Next UI step</mat-card-title>
+        <mat-card-content>
+          <p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
+        </mat-card-content>
+        <mat-card-actions>
+          <a mat-button routerLink="/book/10">Open booking placeholder</a>
+        </mat-card-actions>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3.2rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 52ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowDetailPlaceholderPageComponent {
+  protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}