132 lines
5.3 KiB
Plaintext
132 lines
5.3 KiB
Plaintext
component AnnouncementBar {
|
|
props {
|
|
badge = ""
|
|
badgeIcon = ""
|
|
message = "Announcement"
|
|
description = ""
|
|
icon = "icon-[lucide--megaphone]"
|
|
actionLabel = ""
|
|
actionHref = ""
|
|
actionIcon = ""
|
|
dismissible = false
|
|
dismissLabel = "Dismiss announcement"
|
|
sticky = false
|
|
compact = false
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "soft"
|
|
role = "status"
|
|
live = "polite"
|
|
class = ""
|
|
}
|
|
|
|
state dismissed = false
|
|
|
|
view {
|
|
<aside
|
|
data-ui-component="AnnouncementBar"
|
|
role='{role}'
|
|
aria-live='{live}'
|
|
data-show='!dismissed'
|
|
class='z-40 w-full border-y border-[var(--wire-color-border)] {class}'
|
|
class:sticky='sticky'
|
|
class:top-0='sticky'
|
|
class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
|
|
class:border-[var(--wire-color-primary-muted)]='variant === "soft" && color === "primary"'
|
|
class:bg-[var(--wire-color-info-soft)]='variant === "soft" && color === "info"'
|
|
class:border-[var(--wire-color-info-muted)]='variant === "soft" && color === "info"'
|
|
class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
|
|
class:border-[var(--wire-color-success-muted)]='variant === "soft" && color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
|
|
class:border-[var(--wire-color-warning-muted)]='variant === "soft" && color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
|
|
class:border-[var(--wire-color-danger-muted)]='variant === "soft" && color === "danger"'
|
|
class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
|
|
class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
|
|
class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
|
|
class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
|
|
class:bg-[var(--wire-color-surface-raised)]='variant === "default"'
|
|
>
|
|
<Container columns="1" maxWidth="xl" size="default">
|
|
<div
|
|
class="flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between"
|
|
class:py-2.5='compact'
|
|
>
|
|
<div class="flex min-w-0 items-start gap-3 sm:items-center">
|
|
{#if icon}
|
|
<span
|
|
class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-primary)] shadow-sm"
|
|
class:size-8='compact'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
>
|
|
<span class='{icon + " size-5"}' aria-hidden="true"></span>
|
|
</span>
|
|
{/if}
|
|
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
{#if badge}
|
|
<Badge
|
|
label='{badge}'
|
|
icon='{badgeIcon}'
|
|
size="sm"
|
|
color='{color}'
|
|
variant='{variant === "solid" ? "outline" : "solid"}'
|
|
/>
|
|
{/if}
|
|
|
|
<p
|
|
class="font-semibold"
|
|
class:text-sm='compact || size === "sm"'
|
|
class:text-base='!compact && size !== "sm"'
|
|
class:text-[var(--wire-color-text)]='variant !== "solid"'
|
|
>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
|
|
{#if description && !compact}
|
|
<p
|
|
class="mt-1 text-sm leading-6"
|
|
class:text-[var(--wire-color-text-muted)]='variant !== "solid"'
|
|
class:opacity-85='variant === "solid"'
|
|
>
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex shrink-0 items-center gap-2 sm:justify-end">
|
|
{#if actionLabel}
|
|
<TextLink
|
|
label='{actionLabel}'
|
|
href='{actionHref}'
|
|
icon='{actionIcon}'
|
|
iconPosition="start"
|
|
showArrow="true"
|
|
color='{variant === "solid" ? "neutral" : color}'
|
|
variant='{variant === "solid" ? "button" : "default"}'
|
|
/>
|
|
{/if}
|
|
|
|
{#if dismissible}
|
|
<button
|
|
type="button"
|
|
aria-label='{dismissLabel}'
|
|
class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-raised)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
|
|
@click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }))'
|
|
>
|
|
<span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</aside>
|
|
}
|
|
}
|