Ken
62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
---
|
|
interface Props {
|
|
type?: 'note' | 'pattern' | 'antipattern' | 'warning' | 'tip';
|
|
}
|
|
|
|
const { type = 'note' } = Astro.props;
|
|
|
|
const config: Record<string, { borderColor: string; labelColor: string; label: string }> = {
|
|
note: { borderColor: 'var(--border-default)', labelColor: 'var(--text-secondary)', label: 'Note' },
|
|
pattern: { borderColor: 'var(--accent-primary)', labelColor: 'var(--accent-primary)', label: 'Pattern' },
|
|
antipattern: { borderColor: 'var(--error-border)', labelColor: 'var(--error-text)', label: 'Anti-pattern' },
|
|
warning: { borderColor: 'var(--warning-border)', labelColor: 'var(--warning-text)', label: 'Warning' },
|
|
tip: { borderColor: 'var(--accent-secondary)', labelColor: 'var(--accent-secondary)', label: 'Tip' },
|
|
};
|
|
|
|
const { borderColor, labelColor, label } = config[type];
|
|
---
|
|
|
|
<aside class="callout" role="note" aria-label={`${label} callout`} style={`border-left-color: ${borderColor};`}>
|
|
<span class="callout-label" aria-hidden="true" style={`color: ${labelColor};`}>{label}</span>
|
|
<div class="callout-body"><slot /></div>
|
|
</aside>
|
|
|
|
<style>
|
|
.callout {
|
|
max-width: var(--width-prose);
|
|
background-color: var(--surface-inset);
|
|
border: 1px solid var(--border-subtle);
|
|
border-left: 3px solid;
|
|
border-radius: var(--rounded-lg);
|
|
padding: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.callout-label {
|
|
display: block;
|
|
font-family: var(--font-structure);
|
|
font-size: var(--type-xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: var(--leading-normal);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.callout-body {
|
|
font-family: var(--font-prose);
|
|
font-size: var(--type-base);
|
|
font-weight: 400;
|
|
line-height: var(--leading-prose);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.callout-body :global(p) {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.callout-body :global(p:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
</style> |