openstatus.dev
Openstatus
www.openstatus.dev
1---
2const { data } = Astro.locals.starlightRoute.entry;
3const { title = data.title, tagline, actions = [] } = data.hero || {};
4
5import { LinkButton } from "@astrojs/starlight/components";
6---
7
8<div
9 class="flex w-full flex-col justify-center gap-1 px-3 py-4 text-center md:p-6"
10>
11 <div class="flex flex-col gap-6">
12 <h1
13 class="font-bold text-4xl md:text-6xl"
14 data-page-title
15 set:html={title}
16 />
17 {
18 tagline && (
19 <h2
20 class="mx-auto font-normal max-w-md text-lg text-muted-foreground md:max-w-xl md:text-xl"
21 set:html={tagline}
22 />
23 )
24 }
25 </div>
26 <div class="my-4 grid gap-2 sm:grid-cols-2">
27
28 <div class="text-center sm:block sm:text-left">
29 {
30 actions.length > 0 && (
31 <div class="sl-flex actions">
32 {actions.map(
33 ({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
34 <LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
35 {text}
36 {icon?.html && <Fragment set:html={icon.html} />}
37 </LinkButton>
38 )
39 )}
40 </div>
41 )
42 }
43 </div>
44 </div>
45</div>