Section

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}