blob: a9549bb0ba2e05244bad257383734ce08477fff4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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>
|
