71 lines
1.2 KiB
Svelte
71 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { UiModuleBlock } from "../types";
|
|
import ModuleCard from "./ModuleCard.svelte";
|
|
|
|
let {
|
|
title,
|
|
subtitle,
|
|
eyebrow,
|
|
module,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
eyebrow?: string;
|
|
module?: UiModuleBlock;
|
|
} = $props();
|
|
|
|
const titleId = $props.id();
|
|
</script>
|
|
|
|
<header class="dashboard-header" aria-labelledby={titleId}>
|
|
<div>
|
|
{#if eyebrow}
|
|
<p>{eyebrow}</p>
|
|
{/if}
|
|
<h1 id={titleId}>{title}</h1>
|
|
{#if subtitle}
|
|
<span>{subtitle}</span>
|
|
{/if}
|
|
</div>
|
|
{#if module}
|
|
<ModuleCard {module} />
|
|
{/if}
|
|
</header>
|
|
|
|
<style>
|
|
.dashboard-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--ui-space-4);
|
|
align-items: start;
|
|
border-bottom: var(--ui-border);
|
|
padding: var(--ui-space-3);
|
|
}
|
|
|
|
p,
|
|
span,
|
|
h1 {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p,
|
|
span {
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
h1 {
|
|
overflow-wrap: anywhere;
|
|
font-family: var(--ui-font-display);
|
|
font-size: clamp(2.45rem, 5vw, 4.2rem);
|
|
line-height: 0.85;
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
.dashboard-header {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|