Spaces:
Running
Running
File size: 2,025 Bytes
b9e7b9b d15ea6f c24ea90 b9e7b9b d15ea6f b9e7b9b d15ea6f b9e7b9b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
---
interface Props {
title?: string;
emoji?: string;
class?: string;
variant?: 'neutral' | 'info' | 'success' | 'danger';
}
const { title, emoji, class: className, variant = 'neutral', ...props } = Astro.props as Props;
const wrapperClass = ["note", `note--${variant}`, className].filter(Boolean).join(" ");
const hasHeader = (emoji && String(emoji).length > 0) || (title && String(title).length > 0);
---
<div class={wrapperClass} {...props}>
<div class="note__layout">
{emoji && <div class="note__icon" aria-hidden="true">
<span class="note__emoji">{emoji}</span>
</div>}
<div class="note__body">
{title && <div class="note__title">{title}</div>}
<div class="note__content">
<slot />
</div>
</div>
</div>
</div>
<style>
.note { background: var(--surface-bg); border-left: 2px solid var(--border-color); border-radius: 4px; padding: 10px 14px; margin: var(--block-spacing-y) 0; }
.note__layout { display: flex; align-items: center; gap: 10px; }
.note__icon { flex: 0 0 auto; line-height: 1; }
.note__emoji { font-size: 32px; line-height: 1; display: block; }
.note__body { flex: 1 1 auto; min-width: 0; }
.note__title { font-size: 13px; letter-spacing: .2px; font-weight: 600; color: var(--text-color); margin-bottom: 4px; text-align: left; }
.note__content { color: var(--text-color); font-size: 0.95rem; text-align: left; }
/* Ensure the very last slotted element has no bottom margin */
.note .note__content > :global(*:last-child) { margin-bottom: 0 !important; }
/* Variants */
.note.note--neutral { border-left-color: var(--border-color); background: var(--surface-bg); }
.note.note--info { border-left-color: #f39c12; background: color-mix(in oklab, #f39c12 10%, var(--surface-bg)); }
.note.note--success { border-left-color: #2ecc71; background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg)); }
.note.note--danger { border-left-color: #e74c3c; background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg)); }
</style>
|