|
|
--- |
|
|
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> |
|
|
|
|
|
|
