g1t/apps/docs/src/components/Aside.astro
| 1 | --- |
| 2 | // Starlight's <Aside>, with a Lucide icon for each type (or `icon`, a name |
| 3 | // from lucide.dev). Its look comes from Starlight's global aside styles. |
| 4 | import LucideIcon from './LucideIcon.astro'; |
| 5 | |
| 6 | type AsideType = 'note' | 'tip' | 'caution' | 'danger'; |
| 7 | |
| 8 | interface Props { |
| 9 | type?: AsideType; |
| 10 | title?: string; |
| 11 | icon?: string; |
| 12 | } |
| 13 | |
| 14 | const ICONS: Record<AsideType, string> = { |
| 15 | note: 'info', |
| 16 | tip: 'lightbulb', |
| 17 | caution: 'triangle-alert', |
| 18 | danger: 'octagon-alert', |
| 19 | }; |
| 20 | |
| 21 | const { type = 'note', icon } = Astro.props; |
| 22 | if (!(type in ICONS)) throw new Error(`Aside type must be one of ${Object.keys(ICONS).join(', ')}, not "${type}".`); |
| 23 | const title = Astro.props.title ?? Astro.locals.t(`aside.${type}`); |
| 24 | --- |
| 25 | |
| 26 | <aside aria-label={title} class={`starlight-aside starlight-aside--${type}`}> |
| 27 | <p class="starlight-aside__title" aria-hidden="true"> |
| 28 | <LucideIcon name={icon ?? ICONS[type]} class="starlight-aside__icon" />{title} |
| 29 | </p> |
| 30 | <div class="starlight-aside__content"><slot /></div> |
| 31 | </aside> |