alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 // every step opens with the same title/subtitle pair (appview onboarding/* fragments)
5 export const stepHeader = tv({
6 slots: {
7 root: "flex flex-col gap-2",
8 title: "typography-heading-3 font-semibold text-foreground-default",
9 subtitle: "typography-paragraph-regular text-foreground-muted"
10 }
11 });
12
13 export type StepHeaderVariants = VariantProps<typeof stepHeader>;
14</script>
15
16<script lang="ts">
17 interface Props {
18 title: string;
19 subtitle?: string;
20 }
21
22 let { title, subtitle }: Props = $props();
23
24 const slot = stepHeader();
25</script>
26
27<header class={slot.root()}>
28 <h1 class={slot.title()}>{title}</h1>
29 {#if subtitle}
30 <p class={slot.subtitle()}>{subtitle}</p>
31 {/if}
32</header>