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
52 className={cn(
53 "font-commit-mono text-muted-foreground text-sm tracking-tight",
54 className,
55 )}
56 {...props}
57 >
58 {children}
59 </p>
60 );
61}
62
63export function SectionTitle({
64 children,
65 className,
66 ...props
67}: React.ComponentProps<"p">) {
68 return (
69 <p className={cn("font-medium text-lg", className)} {...props}>
70 {children}
71 </p>
72 );
73}
74
75export function SectionGroup({
76 children,
77 className,
78 ...props
79}: React.ComponentProps<"div">) {
80 return (
81 <div
82 className={cn("mx-auto w-full max-w-4xl space-y-8 px-4 py-8", className)}
83 {...props}
84 >
85 {children}
86 </div>
87 );
88}
89
90export function SectionGroupHeader({
91 children,
92 className,
93 ...props
94}: React.ComponentProps<"div">) {
95 return (
96 <div className={cn("space-y-1.5", className)} {...props}>
97 {children}
98 </div>
99 );
100}
101
102export function SectionGroupTitle({
103 children,
104 className,
105 ...props
106}: React.ComponentProps<"p">) {
107 return (
108 <p className={cn("font-bold text-4xl", className)} {...props}>
109 {children}
110 </p>
111 );
112}