1 files changed, 37 insertions, 0 deletions
diff --git a/frontend/src/components/Page.svelte b/frontend/src/components/Page.svelte
new file mode 100644
index 0000000..a9549bb
--- /dev/null
+++ b/frontend/src/components/Page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    wide?: boolean;
+  }
+  let { title, subtitle, actions, children, wide }: Props = $props();
+</script>
+
+<header class="page-head">
+  <div>
+    <h1>{title}</h1>
+    {#if subtitle}<p class="hint">{subtitle}</p>{/if}
+  </div>
+  {#if actions}{@render actions?.()}{/if}
+</header>
+<div class="page-body" class:wide>
+  {@render children?.()}
+</div>
+
+<style>
+  .page-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+    margin-bottom: 1.1rem;
+    flex-wrap: wrap;
+  }
+  .page-head .hint { margin-top: 0.2rem; }
+  .page-body { max-width: 780px; }
+  .page-body.wide { max-width: none; }
+</style>