Page Heading

1import { cn } from "@/lib/utils";
2import { Tagline } from "@/components/shadcncraft/pro-marketing/tagline";
3 
4function PageHeading({
5  alignment = "left",
6  className,
7  ...props
8}: React.ComponentProps<"div"> & { alignment?: "left" | "center" }) {
9  return (
10    <div
11      data-slot="page-heading"
12      className={cn(
13        "group/page-heading flex max-w-3xl flex-col gap-4",
14        alignment === "left" && "items-start text-left",
15        alignment === "center" && "mx-auto items-center text-center",
16        className
17      )}
18      {...props}
19    />
20  );
21}
22 
23function PageHeadingTagline({ ...props }: React.ComponentProps<typeof Tagline>) {
24  return <Tagline variant="badge" {...props} />;
25}
26 
27function PageHeadingTitle({ className, ...props }: React.ComponentProps<"h1">) {
28  return (
29    <h1
30      data-slot="page-heading-title"
31      className={cn(
32        "cn-font-heading scroll-m-20 text-5xl font-medium tracking-tight text-balance lg:text-6xl",
33        className
34      )}
35      {...props}
36    />
37  );
38}
39 
40function PageHeadingBody({ className, ...props }: React.ComponentProps<"div">) {
41  return (
42    <div
43      data-slot="page-heading-body"
44      className={cn("max-w-xl text-lg text-pretty text-muted-foreground", className)}
45      {...props}
46    />
47  );
48}
49 
50function PageHeadingActions({ className, ...props }: React.ComponentProps<"div">) {
51  return (
52    <div
53      data-slot="page-heading-actions"
54      className={cn("flex w-full flex-col gap-2 sm:w-fit sm:flex-row", className)}
55      {...props}
56    />
57  );
58}
59 
60export {
61  PageHeading,
62  PageHeadingActions,
63  PageHeadingBody,
64  PageHeadingTagline,
65  PageHeadingTitle,
66};