44 lines
1.6 KiB
Plaintext
44 lines
1.6 KiB
Plaintext
component Alert {
|
||
props {
|
||
class = ""
|
||
title = "Notice"
|
||
description = ""
|
||
variant = "info"
|
||
dismissible = false
|
||
}
|
||
|
||
state visible = true
|
||
|
||
view {
|
||
<div
|
||
data-show="visible"
|
||
role="alert"
|
||
class="flex items-start gap-3 rounded-2xl border p-4 {variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'} {class}"
|
||
>
|
||
<div class="min-w-0 flex-1" >
|
||
<h3 class="font-semibold" >
|
||
{title}
|
||
</h3>
|
||
<p
|
||
data-show="description"
|
||
class="mt-1 text-sm opacity-80"
|
||
>
|
||
{description}
|
||
</p>
|
||
<div class="mt-2" >
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
<button
|
||
data-show="dismissible"
|
||
type="button"
|
||
aria-label="Dismiss"
|
||
@click="visible = false"
|
||
class="rounded-lg p-1 hover:bg-black/5"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
}
|
||
}
|