this repo has no description
lewis.moe
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3 import { _ } from '../../lib/i18n'
4
5 interface Props {
6 title: string
7 size?: 'sm' | 'md' | 'lg'
8 backHref?: string
9 backLabel?: string
10 children: Snippet
11 actions?: Snippet
12 }
13
14 let {
15 title,
16 size = 'md',
17 backHref,
18 backLabel,
19 children,
20 actions
21 }: Props = $props()
22</script>
23
24<div class="page page-{size}">
25 <header>
26 {#if backHref}
27 <a href={backHref} class="back-link">← {backLabel || $_('common.backToDashboard')}</a>
28 {/if}
29 <div class="header-row">
30 <h1>{title}</h1>
31 {#if actions}
32 <div class="actions">
33 {@render actions()}
34 </div>
35 {/if}
36 </div>
37 </header>
38 {@render children()}
39</div>
40
41<style>
42 .page {
43 margin: 0 auto;
44 padding: var(--space-7);
45 }
46
47 .page-sm { max-width: var(--width-md); }
48 .page-md { max-width: var(--width-lg); }
49 .page-lg { max-width: var(--width-xl); }
50
51 header {
52 margin-bottom: var(--space-7);
53 }
54
55 .back-link {
56 display: inline-block;
57 color: var(--text-secondary);
58 font-size: var(--text-sm);
59 text-decoration: none;
60 margin-bottom: var(--space-3);
61 }
62
63 .back-link:hover {
64 color: var(--accent);
65 }
66
67 .header-row {
68 display: flex;
69 justify-content: space-between;
70 align-items: center;
71 gap: var(--space-4);
72 }
73
74 h1 {
75 margin: 0;
76 }
77
78 .actions {
79 display: flex;
80 gap: var(--space-3);
81 }
82</style>