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.
1.9 kB · 106 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107import { cn } from "@openstatus/ui/lib/utils";
export function Section({ children, className, ...props}: React.ComponentProps<"section">) { return ( <section className={cn("space-y-4", className)} {...props}> {children} </section> );}
export function SectionHeader({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div className={cn("flex flex-col gap-1.5", className)} {...props}> {children} </div> );}
export function SectionHeaderRow({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div className={cn( "flex flex-col gap-1.5 sm:flex-row sm:items-end sm:justify-between", className, )} {...props} > {children} </div> );}
export function SectionDescription({ children, className, ...props}: React.ComponentProps<"p">) { return ( <p className={cn("text-muted-foreground text-sm", className)} {...props}> {children} </p> );}
export function SectionTitle({ children, className, ...props}: React.ComponentProps<"p">) { return ( <p className={cn("text-lg font-medium", className)} {...props}> {children} </p> );}
export function SectionGroup({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div className={cn("mx-auto w-full max-w-4xl space-y-8 px-4 py-8", className)} {...props} > {children} </div> );}
export function SectionGroupHeader({ children, className, ...props}: React.ComponentProps<"div">) { return ( <div className={cn("space-y-1.5", className)} {...props}> {children} </div> );}
export function SectionGroupTitle({ children, className, ...props}: React.ComponentProps<"p">) { return ( <p className={cn("text-4xl font-bold", className)} {...props}> {children} </p> );}