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
--- a/frontend/src/app/pages/show-list-page.component.ts
+++ b/frontend/src/app/pages/show-list-page.component.ts
@@ -0,0 +1,125 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+
+type DemoShow = {
+  slug: string;
+  title: string;
+  summary: string;
+  venue: string;
+  startsAt: string;
+};
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, MatCardModule, MatChipsModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Public shows</p>
+          <h1>Show list placeholder</h1>
+        </div>
+        <p class="supporting">
+          This page is ready to bind to <code>GET /api/shows/</code> and <code>GET /api/performances/</code>.
+        </p>
+      </header>
+
+      <div class="show-grid">
+        @for (show of demoShows; track show.slug) {
+          <mat-card class="show-card">
+            <mat-card-title>{{ show.title }}</mat-card-title>
+            <mat-card-subtitle>{{ show.venue }}</mat-card-subtitle>
+            <mat-card-content>
+              <p>{{ show.summary }}</p>
+              <mat-chip-set>
+                <mat-chip>{{ show.startsAt }}</mat-chip>
+              </mat-chip-set>
+            </mat-card-content>
+            <mat-card-actions>
+              <a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
+            </mat-card-actions>
+          </mat-card>
+        }
+      </div>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
+      gap: 24px;
+      align-items: end;
+      margin-bottom: 24px;
+    }
+
+    .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, 3rem);
+    }
+
+    .supporting {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .show-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 20px;
+    }
+
+    .show-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .show-card p {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    @media (max-width: 860px) {
+      .page-header {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowListPageComponent {
+  protected readonly demoShows: DemoShow[] = [
+    {
+      slug: 'open-stage',
+      title: 'Open Stage',
+      summary: 'Placeholder list item for the first published production.',
+      venue: 'AzioneLab Theatre',
+      startsAt: 'May 15, 20:30',
+    },
+    {
+      slug: 'city-echoes',
+      title: 'City Echoes',
+      summary: 'Second sample entry showing how cards will map to live API data.',
+      venue: 'Studio Nuovo',
+      startsAt: 'May 22, 18:00',
+    },
+  ];
+}