openstatus.dev
Openstatus
www.openstatus.dev
1import { cn } from "@/lib/utils";
2import { Background } from "./background";
3
4export function BasicLayout({
5 title,
6 description,
7 children,
8 tw,
9}: {
10 title: string;
11 description?: string | null;
12 children?: React.ReactNode;
13 tw?: string;
14}) {
15 return (
16 <Background>
17 <div tw="flex flex-col h-full w-full px-24">
18 <div tw="flex flex-col flex-1 justify-end">
19 <div tw="flex flex-col px-12">
20 <h3 style={{ fontFamily: "Cal" }} tw="text-5xl">
21 {title}
22 </h3>
23 {description ? (
24 <p
25 tw="text-slate-600 text-3xl"
26 style={{ lineClamp: 2, display: "block" }}
27 >
28 {description}
29 </p>
30 ) : null}
31 </div>
32 </div>
33 <div
34 tw={cn(
35 "flex flex-col justify-center shadow-2xl mt-1 bg-white rounded-t-lg border-t-2 border-r-2 border-l-2 border-slate-200 px-12",
36 tw,
37 )}
38 >
39 {children}
40 </div>
41 </div>
42 </Background>
43 );
44}