chore: update to latest astro ink version
This commit is contained in:
31
src/components/Callout.astro
Normal file
31
src/components/Callout.astro
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user