43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
|
|
const TONES = {
|
|
tip: {
|
|
shell: 'border-sky-300/25 bg-sky-400/10 text-sky-50',
|
|
icon: 'fa-solid fa-lightbulb text-sky-200',
|
|
label: 'Tip',
|
|
},
|
|
note: {
|
|
shell: 'border-white/15 bg-white/[0.05] text-white',
|
|
icon: 'fa-solid fa-circle-info text-slate-200',
|
|
label: 'Note',
|
|
},
|
|
warning: {
|
|
shell: 'border-amber-300/25 bg-amber-400/10 text-amber-50',
|
|
icon: 'fa-solid fa-triangle-exclamation text-amber-200',
|
|
label: 'Warning',
|
|
},
|
|
practice: {
|
|
shell: 'border-emerald-300/25 bg-emerald-400/10 text-emerald-50',
|
|
icon: 'fa-solid fa-badge-check text-emerald-200',
|
|
label: 'Best Practice',
|
|
},
|
|
}
|
|
|
|
export default function DocsCallout({ tone = 'note', title, children }) {
|
|
const styles = TONES[tone] || TONES.note
|
|
|
|
return (
|
|
<aside className={`rounded-[24px] border px-4 py-4 md:px-5 ${styles.shell}`}>
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-black/20">
|
|
<i className={styles.icon} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">{styles.label}</p>
|
|
{title ? <h3 className="mt-1 text-base font-semibold">{title}</h3> : null}
|
|
<div className="mt-2 text-sm leading-6 opacity-90">{children}</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
} |