Spaces:
Running
Running
File size: 1,034 Bytes
b9e7b9b c24ea90 b9e7b9b c24ea90 b9e7b9b c24ea90 b9e7b9b c24ea90 b9e7b9b c24ea90 b9e7b9b c24ea90 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 |
---
const { title, emoji, class: className, ...props } = Astro.props;
const wrapperClass = ["note", className].filter(Boolean).join(" ");
const hasHeader = (emoji && String(emoji).length > 0) || (title && String(title).length > 0);
---
<div class={wrapperClass} {...props}>
{hasHeader && <div class="note__header">
{emoji && <span class="note__emoji">{emoji}</span>}
{title && <span class="note__title">{title}</span>}
</div>}
<div class="note__content">
<slot />
</div>
</div>
<style>
.note { background: var(--surface-bg); border-left: 2px solid var(--border-color); border-radius: 4px; padding: 10px 14px; margin: 12px 0; }
.note__header { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-color); margin-bottom: 6px; }
.note__emoji { font-size: 24px; line-height: 1; }
.note__title { font-size: 13px; letter-spacing: .2px; }
.note__content { color: var(--text-color); font-size: 0.95rem; }
.note__content > p:last-of-type { margin-bottom: 0 !important; }
</style>
|