flagon-io/g1t

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
// Starlight's <Aside>, with a Lucide icon for each type (or `icon`, a name
// from lucide.dev). Its look comes from Starlight's global aside styles.
import LucideIcon from './LucideIcon.astro';

type AsideType = 'note' | 'tip' | 'caution' | 'danger';

interface Props {
	type?: AsideType;
	title?: string;
	icon?: string;
}

const ICONS: Record<AsideType, string> = {
	note: 'info',
	tip: 'lightbulb',
	caution: 'triangle-alert',
	danger: 'octagon-alert',
};

const { type = 'note', icon } = Astro.props;
if (!(type in ICONS)) throw new Error(`Aside type must be one of ${Object.keys(ICONS).join(', ')}, not "${type}".`);
const title = Astro.props.title ?? Astro.locals.t(`aside.${type}`);
---

<aside aria-label={title} class={`starlight-aside starlight-aside--${type}`}>
	<p class="starlight-aside__title" aria-hidden="true">
		<LucideIcon name={icon ?? ICONS[type]} class="starlight-aside__icon" />{title}
	</p>
	<div class="starlight-aside__content"><slot /></div>
</aside>