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