SectionHeader

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import SectionHeaderExample from './SectionHeaderExample.svelte';
</script>

<SectionHeaderExample description={true} action={true} />

<script lang="ts">
  import { Badge, SectionHeader } from 'portal-bits';
  let { description = true, action = true }: { description?: boolean; action?: boolean } = $props();
</script>

{#snippet featured()}<Badge variant="spotlight">Featured</Badge>{/snippet}

<SectionHeader
  title="Your collection"
  description={description ? 'Made for you.' : undefined}
  action={action ? featured : undefined}
/>