summaryrefslogtreecommitdiff
path: root/frontend/src/components/Page.svelte
blob: 22aa78ebcbfafe691d19ddb244a8655c52f7262d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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="flex flex-wrap justify-between items-start gap-4 mb-4">
  <div>
    <h1 class="text-xl font-semibold">{title}</h1>
    {#if subtitle}<p class="text-sm text-muted-foreground mt-0.5">{subtitle}</p>{/if}
  </div>
  {#if actions}{@render actions?.()}{/if}
</header>
<div class={wide ? '' : 'max-w-3xl'}>
  {@render children?.()}
</div>