53 lines
1.1 KiB
Plaintext
53 lines
1.1 KiB
Plaintext
---
|
|
const {
|
|
kind = "note", // note | definition | these | objection | limite | scene | procedure
|
|
title,
|
|
} = Astro.props;
|
|
|
|
const labels = {
|
|
note: "Note",
|
|
definition: "Définition",
|
|
these: "Thèse",
|
|
objection: "Objection",
|
|
limite: "Limite",
|
|
scene: "Scène",
|
|
procedure: "Procédure",
|
|
};
|
|
|
|
const label = labels[kind] ?? "Note";
|
|
---
|
|
<section class={`callout callout-${kind}`}>
|
|
<div class="callout-head">
|
|
<span class="callout-badge">{label}</span>
|
|
{title ? <strong class="callout-title">{title}</strong> : null}
|
|
</div>
|
|
<div class="callout-body">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.callout {
|
|
border: 1px solid rgba(127,127,127,0.35);
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
margin: 14px 0;
|
|
background: rgba(127,127,127,0.06);
|
|
}
|
|
.callout-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.callout-badge {
|
|
font-size: 12px;
|
|
border: 1px solid rgba(127,127,127,0.45);
|
|
border-radius: 999px;
|
|
padding: 2px 8px;
|
|
opacity: 0.95;
|
|
}
|
|
.callout-title { font-weight: 700; }
|
|
.callout-body :global(p:last-child) { margin-bottom: 0; }
|
|
</style>
|