openstatus.dev
Openstatus
www.openstatus.dev
1import { cn } from "@/lib/utils";
2
3export function Section({
4 children,
5 className,
6 ...props
7}: React.ComponentProps<"section">) {
8 return (
9 <section className={cn("space-y-4", className)} {...props}>
10 {children}
11 </section>
12 );
13}
14
15export function SectionHeader({
16 children,
17 className,
18 ...props
19}: React.ComponentProps<"div">) {
20 return (
21 <div className={cn("flex flex-col gap-1.5", className)} {...props}>
22 {children}
23 </div>
24 );
25}
26
27export function SectionHeaderRow({
28 children,
29 className,
30 ...props
31}: React.ComponentProps<"div">) {
32 return (
33 <div
34 className={cn(
35 "flex flex-col gap-1.5 sm:flex-row sm:items-end sm:justify-between",
36 className,
37 )}
38 {...props}
39 >
40 {children}
41 </div>
42 );
43}
44
45export function SectionDescription({
46 children,
47 className,
48 ...props
49}: React.ComponentProps<"p">) {
50 return (
51 <p className={cn("text-muted-foreground text-sm", className)} {...props}>
52 {children}
53 </p>
54 );
55}
56
57export function SectionTitle({
58 children,
59 className,
60 ...props
61}: React.ComponentProps<"p">) {
62 return (
63 <p className={cn("font-medium text-lg", className)} {...props}>
64 {children}
65 </p>
66 );
67}
68
69export function SectionGroup({
70 children,
71 className,
72 ...props
73}: React.ComponentProps<"div">) {
74 return (
75 <div
76 className={cn("mx-auto w-full max-w-4xl space-y-8 px-4 py-8", className)}
77 {...props}
78 >
79 {children}
80 </div>
81 );
82}
83
84export function SectionGroupHeader({
85 children,
86 className,
87 ...props
88}: React.ComponentProps<"div">) {
89 return (
90 <div className={cn("space-y-1.5", className)} {...props}>
91 {children}
92 </div>
93 );
94}
95
96export function SectionGroupTitle({
97 children,
98 className,
99 ...props
100}: React.ComponentProps<"p">) {
101 return (
102 <p className={cn("font-bold text-4xl", className)} {...props}>
103 {children}
104 </p>
105 );
106}