2 lines
1.0 KiB
Plaintext
2 lines
1.0 KiB
Plaintext
component Alert { props { 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'}"><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> } }
|