mirror of
https://github.com/sern-handler/website
synced 2026-06-19 22:32:23 +00:00
39 lines
1.1 KiB
Plaintext
39 lines
1.1 KiB
Plaintext
---
|
|
import { AstroError } from 'astro/errors';
|
|
import { slugToLocaleData, urlToSlug } from '../utils/slugs';
|
|
import { useTranslations } from '../utils/translations';
|
|
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) {
|
|
const { locale } = slugToLocaleData(urlToSlug(Astro.url));
|
|
title = useTranslations(locale)(`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>
|
|
<section class="starlight-aside__content">
|
|
<slot />
|
|
</section>
|
|
</aside>
|