1
import { Tagline } from "@/components/features/pxl/marketing/tagline";
2
import { cn } from "@/lib/utils";
3

4
function PageHeading({
5
  alignment = "left",
6
  className,
7
  ...props
8
}: React.ComponentProps<"div"> & { alignment?: "left" | "center" | "right" }) {
9
  return (
10
    <div
11
      data-slot="page-heading"
12
      className={cn(
13
        "group/page-heading flex max-w-3xl flex-col gap-3",
14
        alignment === "left" && "items-start text-left",
15
        alignment === "center" && "mx-auto items-center text-center",
16
        alignment === "right" && "items-end text-right",
17
        className
18
      )}
19
      {...props}
20
    />
21
  );
22
}
23

24
function PageHeadingTagline({ ...props }: React.ComponentProps<typeof Tagline>) {
25
  return <Tagline variant="badge" {...props} />;
26
}
27

28
function PageHeadingTitle({ className, ...props }: React.ComponentProps<"h1">) {
29
  return (
30
    <h1
31
      data-slot="page-heading-title"
32
      className={cn(
33
        "cn-font-heading scroll-m-20 text-5xl font-medium tracking-tight text-balance lg:text-6xl",
34
        className
35
      )}
36
      {...props}
37
    />
38
  );
39
}
40

41
function PageHeadingBody({ className, ...props }: React.ComponentProps<"div">) {
42
  return (
43
    <div
44
      data-slot="page-heading-body"
45
      className={cn("max-w-xl text-lg text-pretty text-muted-foreground", className)}
46
      {...props}
47
    />
48
  );
49
}
50

51
function PageHeadingActions({ className, ...props }: React.ComponentProps<"div">) {
52
  return (
53
    <div
54
      data-slot="page-heading-actions"
55
      className={cn("flex w-full flex-col gap-1.5 sm:w-fit sm:flex-row", className)}
56
      {...props}
57
    />
58
  );
59
}
60

61
export {
62
  PageHeading,
63
  PageHeadingActions,
64
  PageHeadingBody,
65
  PageHeadingTagline,
66
  PageHeadingTitle,
67
};