Section Heading

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import type { ComponentProps } from "react";
4

5
import { Tagline } from "@/components/features/pxl/marketing/tagline";
6
import { cn } from "@/lib/utils";
7

8
function SectionHeading({
9
  alignment = "left",
10
  size = "lg",
11
  className,
12
  ...props
13
}: ComponentProps<"div"> & {
14
  alignment?: "left" | "center" | "right";
15
  size?: "sm" | "lg";
16
}) {
17
  return (
18
    <div
19
      data-slot="section-heading"
20
      data-alignment={alignment}
21
      data-size={size}
22
      className={cn(
23
        "group/section-heading flex max-w-3xl flex-col gap-2.5",
24
        alignment === "left" && "items-start text-left",
25
        alignment === "right" && "items-end text-right",
26
        alignment === "center" && "mx-auto items-center text-center",
27
        className,
28
      )}
29
      {...props}
30
    />
31
  );
32
}
33

34
function SectionHeadingTagline({ ...props }: ComponentProps<typeof Tagline>) {
35
  return <Tagline variant="default" {...props} />;
36
}
37

38
function SectionHeadingTitle({
39
  children,
40
  className,
41
  render,
42
  ...props
43
}: useRender.ComponentProps<"h2">) {
44
  return useRender({
45
    defaultTagName: "div",
46
    render,
47
    props: mergeProps<"div">(
48
      {
49
        "data-slot": "section-heading-title",
50
        className: cn(
51
          "cn-font-heading scroll-m-20 text-4xl font-medium tracking-tight text-balance group-data-[size=sm]/section-heading:text-3xl lg:text-5xl lg:group-data-[size=sm]/section-heading:text-4xl",
52
          className,
53
        ),
54
        children,
55
      },
56
      props,
57
    ),
58
  });
59
}
60

61
function SectionHeadingBody({ className, ...props }: ComponentProps<"div">) {
62
  return (
63
    <div
64
      data-slot="section-heading-body"
65
      className={cn(
66
        "max-w-2xl text-base text-pretty text-muted-foreground",
67
        className,
68
      )}
69
      {...props}
70
    />
71
  );
72
}
73

74
function SectionHeadingActions({ className, ...props }: ComponentProps<"div">) {
75
  return (
76
    <div
77
      data-slot="section-heading-actions"
78
      className={cn(
79
        "flex w-full flex-col gap-1.5 sm:w-fit sm:flex-row",
80
        className,
81
      )}
82
      {...props}
83
    />
84
  );
85
}
86

87
export {
88
  SectionHeading,
89
  SectionHeadingActions,
90
  SectionHeadingBody,
91
  SectionHeadingTagline,
92
  SectionHeadingTitle,
93
};