Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
3.4 kB · 97 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798import { BookOpen } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";
import { SHELL_CONTENT_COLUMN, SHELL_FORM_COLUMN,} from "@/components/layout/shell-columns";import { Wordmark } from "@/components/layout/wordmark";import { cn } from "@/lib/utils";
export function AuthLayout({ children }: { children: React.ReactNode }) { return ( <div className="relative grid min-h-screen grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5"> <div className="absolute top-4 left-4 z-10"> <Wordmark size={24} showText /> </div> <Button size="sm" variant="outline" className="absolute top-4 right-4 z-10" asChild > <a href="https://www.openstatus.dev/docs" target="_blank" rel="noreferrer" > <BookOpen /> Documentation </a> </Button> {/* Column widths mirror onboarding: form column = `xl:col-span-2`, content column = `xl:col-span-3`. Both login and onboarding keep the form on the left, so the grids feel aligned when navigating between them. */} <main className={cn( "col-span-1 container mx-auto flex items-center justify-center md:col-span-1", SHELL_FORM_COLUMN, )} > {children} </main> <aside className={cn( "border-border bg-sidebar col-span-1 flex w-full flex-col gap-4 border p-4 backdrop-blur-[2px] md:p-8", SHELL_CONTENT_COLUMN, )} > <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center gap-8 text-center md:text-left"> <div className="mx-auto grid gap-3"> <h1 className="font-cal text-foreground text-3xl"> Your status page, live in minutes. </h1> <p className="font-commit-mono text-muted-foreground"> Communicate incidents, prove uptime, and monitor every endpoint from 28 regions. Open source. Free to start. </p> <p className="font-commit-mono text-muted-foreground"> Coming from{" "} <a href="https://openstatus.dev/guides/migrate-from-atlassian-statuspage" target="_blank" rel="noreferrer" className="text-foreground underline underline-offset-4 hover:no-underline" > Atlassian Statuspage </a> ,{" "} <a href="https://openstatus.dev/guides/migrate-from-betterstack" target="_blank" rel="noreferrer" className="text-foreground underline underline-offset-4 hover:no-underline" > Betterstack </a> , or{" "} <a href="https://openstatus.dev/guides/migrate-from-instatus" target="_blank" rel="noreferrer" className="text-foreground underline underline-offset-4 hover:no-underline" > Instatus </a> ? We have importers for all three. </p> </div> </div> <div className="md:h-8" /> </aside> </div> );}