jjj 0.2.1

A modal interface for Jujutsu.
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
32
33
34
35

---
import { AstroError } from 'astro/errors';
import Icon from './Icon.astro';

const asideVariants = ['note', 'tip', 'caution', 'danger'] as const;
const icons = { note: 'information', tip: 'rocket', caution: 'warning', danger: 'error' } as const;

interface Props {
	type?: (typeof asideVariants)[number];
	title?: string;
}

let { type = 'note', title } = Astro.props;

if (!asideVariants.includes(type)) {
	throw new AstroError(
		'Invalid `type` prop passed to the `<Aside>` component.\n',
		`Received: ${JSON.stringify(type)}\n` +
			`Expected one of ${asideVariants.map((i) => JSON.stringify(i)).join(', ')}`
	);
}

if (!title) {
	title = Astro.locals.t(`aside.${type}`);
}
---

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