44 lines
1.1 KiB
Text
44 lines
1.1 KiB
Text
---
|
||
interface Props {
|
||
type: "default" | "info" | "warning" | "error";
|
||
}
|
||
|
||
const { type = "default" } = Astro.props;
|
||
|
||
let emoji = "💡";
|
||
|
||
if (type === "info") {
|
||
emoji = "ℹ️";
|
||
} else if (type === "warning") {
|
||
emoji = "⚠️";
|
||
} else if (type === "error") {
|
||
emoji = "🚨";
|
||
}
|
||
---
|
||
|
||
<div class={`not-prose callout callout-${type}`}>
|
||
<span class="emoji pointer-events-none select-none">{emoji}</span>
|
||
<slot />
|
||
</div>
|
||
|
||
<style>
|
||
.callout {
|
||
@apply relative my-4 flex rounded border border-orange-800 bg-orange-100 p-3 text-orange-950 dark:border-orange-200/20 dark:bg-orange-950/20 dark:text-orange-200;
|
||
}
|
||
|
||
.emoji {
|
||
@apply pr-3 text-xl;
|
||
}
|
||
|
||
.callout-info {
|
||
@apply border-blue-800 bg-blue-100 text-blue-950 dark:border-blue-200/20 dark:bg-blue-950/20 dark:text-blue-200;
|
||
}
|
||
|
||
.callout-warning {
|
||
@apply border-yellow-800 bg-yellow-100 text-yellow-950 dark:border-yellow-200/20 dark:bg-yellow-950/20 dark:text-yellow-200;
|
||
}
|
||
|
||
.callout-error {
|
||
@apply border-red-800 bg-red-100 text-red-950 dark:border-red-200/20 dark:bg-red-950/20 dark:text-red-200;
|
||
}
|
||
</style>
|