51 lines
No EOL
1.3 KiB
Text
51 lines
No EOL
1.3 KiB
Text
---
|
|
export type BadgeType = 'success' | 'danger' | 'note' | 'warning' | 'tip'
|
|
|
|
interface Props {
|
|
text: string
|
|
type: BadgeType
|
|
outline?: boolean
|
|
}
|
|
|
|
const { text, type = 'note', outline = false } = Astro.props
|
|
---
|
|
<span class:list={['ink-badge', `ink-badge__${type}${outline && '--outline'}`, `ink-badge__${type}`]} set:html={text} />
|
|
|
|
<style>
|
|
.ink-badge {
|
|
@apply inline-block font-xs font-normal text-inherit bg-theme-primary dark:bg-theme-dark-primary px-3 py-1 border-1 rounded-b-md
|
|
}
|
|
.ink-badge--outline {
|
|
@apply bg-transparent
|
|
}
|
|
.ink-badge__success {
|
|
@apply bg-green-300
|
|
}
|
|
.ink-badge__danger {
|
|
@apply bg-red-300
|
|
}
|
|
.ink-badge__note {
|
|
@apply bg-gray-300
|
|
}
|
|
.ink-badge__warning {
|
|
@apply bg-orange-300
|
|
}
|
|
.ink-badge__tip {
|
|
@apply bg-yellow-300
|
|
}
|
|
.ink-badge--outline.ink-badge__success {
|
|
@apply border-green-300
|
|
}
|
|
.ink-badge--outline.ink-badge__danger {
|
|
@apply border-red-300
|
|
}
|
|
.ink-badge--outline.ink-badge__note {
|
|
@apply border-gray-300
|
|
}
|
|
.ink-badge--outline.ink-badge__warning {
|
|
@apply border-orange-300
|
|
}
|
|
.ink-badge--outline.ink-badge__tip {
|
|
@apply border-yellow-300
|
|
}
|
|
</style> |