106 lines
2.9 KiB
Plaintext
106 lines
2.9 KiB
Plaintext
component PageHeader {
|
|
props {
|
|
eyebrow = ""
|
|
title = ""
|
|
description = ""
|
|
icon = ""
|
|
align = "left"
|
|
size = "default"
|
|
compact = false
|
|
showBreadcrumbs = false
|
|
breadcrumbs = []
|
|
primaryLabel = ""
|
|
primaryHref = ""
|
|
primaryIcon = ""
|
|
secondaryLabel = ""
|
|
secondaryHref = ""
|
|
secondaryIcon = ""
|
|
color = "primary"
|
|
variant = "default"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="PageHeader"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
class='{class}'
|
|
>
|
|
<Section
|
|
spacing='{compact || size === "compact" ? "md" : "lg"}'
|
|
variant='{variant}'
|
|
color='{color}'
|
|
borderBottom="true"
|
|
>
|
|
{#if showBreadcrumbs && breadcrumbs.length > 0}
|
|
<Breadcrumb
|
|
label="Breadcrumb"
|
|
items='{breadcrumbs}'
|
|
active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || ""}'
|
|
color='{color}'
|
|
class="mb-6"
|
|
/>
|
|
{/if}
|
|
|
|
<div
|
|
class="flex flex-col gap-6"
|
|
class:items-center='align === "center"'
|
|
class:text-center='align === "center"'
|
|
class:lg:flex-row='align !== "center"'
|
|
class:lg:items-end='align !== "center"'
|
|
class:lg:justify-between='align !== "center"'
|
|
>
|
|
<div class="max-w-4xl">
|
|
{#if icon}
|
|
<span class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
|
|
<span class='{icon + " size-6"}' aria-hidden="true"></span>
|
|
</span>
|
|
{/if}
|
|
|
|
<SectionHeader
|
|
eyebrow='{eyebrow}'
|
|
title='{title}'
|
|
description='{description}'
|
|
align='{align === "center" ? "center" : "left"}'
|
|
size='{compact || size === "compact" ? "sm" : "lg"}'
|
|
color='{color}'
|
|
headingLevel="1"
|
|
maxWidth="4xl"
|
|
>
|
|
<slot name="meta"></slot>
|
|
</SectionHeader>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-3" class:justify-center='align === "center"'>
|
|
{#if secondaryLabel}
|
|
<Button
|
|
label='{secondaryLabel}'
|
|
href='{secondaryHref}'
|
|
icon='{secondaryIcon}'
|
|
variant="outline"
|
|
color='{color}'
|
|
/>
|
|
{/if}
|
|
|
|
{#if primaryLabel}
|
|
<Button
|
|
label='{primaryLabel}'
|
|
href='{primaryHref}'
|
|
icon='{primaryIcon}'
|
|
variant="default"
|
|
color='{color}'
|
|
/>
|
|
{/if}
|
|
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</Section>
|
|
</div>
|
|
}
|
|
}
|