32 lines
867 B
Plaintext
32 lines
867 B
Plaintext
---
|
|
import { Icon } from 'astro-icon'
|
|
export type CalloutType = 'check' | 'error' | 'note' | 'warning'
|
|
interface Props {
|
|
title: string
|
|
type: CalloutType
|
|
}
|
|
|
|
const ICON_MAP: Record<CalloutType, string> = {
|
|
'check': 'check-circle',
|
|
'error': 'close-circle',
|
|
'note': 'note',
|
|
'warning': 'warning-circle'
|
|
}
|
|
|
|
const COLOR_MAP: Record<CalloutType, string> = {
|
|
'check': 'text-green-700',
|
|
'error': 'text-red-700',
|
|
'note': ' text-gray-700',
|
|
'warning': 'text-orange-700'
|
|
}
|
|
|
|
const { title, type = 'note' } = Astro.props
|
|
---
|
|
<div class="callout flex gap-2 w-full bg-gray-50 my-1 px-5 py-2 rounded-sm shadow-sm">
|
|
<Icon class={`w-8 h-8 inline-block ${COLOR_MAP[type]}`} pack="mdi" name={ICON_MAP[type]} />
|
|
<div class="copy flex flex-col">
|
|
<h3 class={`title m-0 ${COLOR_MAP[type]}`}>{title}</h3>
|
|
<slot/>
|
|
</div>
|
|
</div>
|