114 lines
3.7 KiB
Plaintext
114 lines
3.7 KiB
Plaintext
component SectionHeader {
|
|
props {
|
|
id: string = ""
|
|
eyebrow: string = ""
|
|
title: string = ""
|
|
description: string = ""
|
|
align: string = "left"
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
headingLevel: number = 2
|
|
maxWidth: string = "3xl"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<header
|
|
data-ui-component="SectionHeader"
|
|
class='flex min-w-0 flex-col gap-5 {class}'
|
|
class:items-center='align === "center"'
|
|
class:text-center='align === "center"'
|
|
class:items-end='align === "right"'
|
|
class:text-right='align === "right"'
|
|
class:lg:flex-row='align === "split"'
|
|
class:lg:items-end='align === "split"'
|
|
class:lg:justify-between='align === "split"'
|
|
>
|
|
<div
|
|
class="min-w-0"
|
|
class:max-w-xl='maxWidth === "xl"'
|
|
class:max-w-2xl='maxWidth === "2xl"'
|
|
class:max-w-3xl='maxWidth === "3xl"'
|
|
class:max-w-4xl='maxWidth === "4xl"'
|
|
class:mx-auto='align === "center"'
|
|
>
|
|
<div class="mb-3 flex items-center gap-3" class:justify-center='align === "center"' class:justify-end='align === "right"'>
|
|
<slot name="icon"></slot>
|
|
|
|
{#if eyebrow}
|
|
<p
|
|
class="text-xs font-bold uppercase tracking-[0.18em]"
|
|
class:text-sm='size === "lg"'
|
|
class:text-[var(--wire-color-primary)]='color === "primary"'
|
|
class:text-[var(--wire-color-secondary)]='color === "secondary"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
>
|
|
{eyebrow}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if headingLevel === 1}
|
|
<h1
|
|
id='{id}'
|
|
class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
|
|
class:text-3xl='size === "sm"'
|
|
class:text-4xl='size === "default" || size === "md"'
|
|
class:sm:text-5xl='size === "default" || size === "md"'
|
|
class:text-5xl='size === "lg"'
|
|
class:sm:text-6xl='size === "lg"'
|
|
>
|
|
{title}
|
|
</h1>
|
|
{:else if headingLevel === 3}
|
|
<h3
|
|
id='{id}'
|
|
class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
|
|
class:text-xl='size === "sm"'
|
|
class:text-2xl='size === "default" || size === "md"'
|
|
class:text-3xl='size === "lg"'
|
|
>
|
|
{title}
|
|
</h3>
|
|
{:else}
|
|
<h2
|
|
id='{id}'
|
|
class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
|
|
class:text-2xl='size === "sm"'
|
|
class:text-3xl='size === "default" || size === "md"'
|
|
class:sm:text-4xl='size === "default" || size === "md"'
|
|
class:text-4xl='size === "lg"'
|
|
class:sm:text-5xl='size === "lg"'
|
|
>
|
|
{title}
|
|
</h2>
|
|
{/if}
|
|
|
|
{#if description}
|
|
<p
|
|
class="mt-4 leading-7 text-[var(--wire-color-text-muted)]"
|
|
class:text-sm='size === "sm"'
|
|
class:text-base='size === "default" || size === "md"'
|
|
class:text-lg='size === "lg"'
|
|
>
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div
|
|
class="flex shrink-0 flex-wrap items-center gap-3"
|
|
class:justify-center='align === "center"'
|
|
class:justify-end='align === "right" || align === "split"'
|
|
>
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</header>
|
|
}
|
|
}
|