diff options
| author | Somhairle H. Marisol <[email protected]> | 2026-09-17 14:32:37 +0800 |
|---|---|---|
| committer | Somhairle H. Marisol <[email protected]> | 2026-09-17 14:32:37 +0800 |
| commit | 5c0ba37eda80d39e6ceca59bb1d5f4942f858995 (patch) | |
| tree | 948723f9cedf7ccb0707fa6ee516bd30fe20fd10 /frontend/src/components/Page.svelte | |
| download | strategy-lab-5c0ba37eda80d39e6ceca59bb1d5f4942f858995.tar.gz | |
chore: establish Strategy Lab source baseline (development, not release)
Diffstat (limited to 'frontend/src/components/Page.svelte')
| -rw-r--r-- | frontend/src/components/Page.svelte | 37 |
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> |
