src/lib/components/SectionTitle.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


<script lang="ts">
	import type { Snippet } from 'svelte';

	let { level = 2, children }: { level?: 2 | 3; children: Snippet } = $props();
</script>

<svelte:element this={level === 2 ? 'h2' : 'h3'}>
	{@render children()}
</svelte:element>

<style>
	h2,
	h3 {
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--text-secondary);
		margin: 1.25rem 0 0.5rem;
		padding-left: 0.5rem;
	}
</style>