openstatus.dev
Openstatus
www.openstatus.dev
1import Image from "next/image";
2
3export function AuthLayout({ children }: { children: React.ReactNode }) {
4 return (
5 <div className="grid min-h-screen grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
6 <aside className="col-span-1 flex w-full flex-col gap-4 border border-border bg-sidebar p-4 backdrop-blur-[2px] md:p-8 xl:col-span-2">
7 <a href="https://openstatus.dev" className="relative h-8 w-8">
8 <Image
9 src="https://openstatus.dev/icon.png"
10 alt="OpenStatus"
11 height={32}
12 width={32}
13 className="rounded-full border border-border"
14 />
15 </a>
16 <div className="mx-auto flex w-full max-w-lg flex-1 flex-col justify-center gap-8 text-center md:text-left">
17 <div className="mx-auto grid gap-3">
18 <h1 className="font-cal text-3xl text-foreground">
19 Open Source Monitoring Service
20 </h1>
21 <p className="text-muted-foreground text-sm">
22 Monitor your website or API and create your own status page within
23 a couple of minutes. Want to know how it works? <br />
24 <br />
25 Check out{" "}
26 <a
27 href="https://github.com/openstatushq/openstatus"
28 target="_blank"
29 rel="noreferrer"
30 className="text-foreground underline underline-offset-4 hover:no-underline"
31 >
32 GitHub
33 </a>{" "}
34 and let us know your use case!
35 </p>
36 </div>
37 </div>
38 <div className="md:h-8" />
39 </aside>
40 <main className="container col-span-1 mx-auto flex items-center justify-center md:col-span-1 xl:col-span-3">
41 {children}
42 </main>
43 </div>
44 );
45}