Section Heading

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4import { Tagline } from "@/components/shadcncraft/pro-marketing/tagline";
5 
6function SectionHeading({
7  alignment = "left",
8  size = "lg",
9  className,
10  ...props
11}: React.ComponentProps<"div"> & { alignment?: "left" | "center"; size?: "sm" | "lg" }) {
12  return (
13    <div
14      data-slot="section-heading"
15      data-alignment={alignment}
16      data-size={size}
17      className={cn(
18        "group/section-heading flex max-w-3xl flex-col gap-3",
19        alignment === "left" && "items-start text-left",
20        alignment === "center" && "mx-auto items-center text-center",
21        className
22      )}
23      {...props}
24    />
25  );
26}
27 
28function SectionHeadingTagline({ ...props }: React.ComponentProps<typeof Tagline>) {
29  return <Tagline variant="default" {...props} />;
30}
31 
32type HeadingTypes = "h2" | "h3" | "h4" | "h5" | "h6";
33type HeadingProps<T extends HeadingTypes> = React.ComponentProps<T> & {
34  as?: T;
35};
36 
37function SectionHeadingTitle<T extends HeadingTypes = "h2">({
38  as,
39  className,
40  ...props
41}: HeadingProps<T>) {
42  const Comp = as ?? "h2";
43 
44  return (
45    <Comp
46      data-slot="section-heading-title"
47      className={cn(
48        "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",
49        className
50      )}
51      {...props}
52    />
53  );
54}
55 
56function SectionHeadingBody({ className, ...props }: React.ComponentProps<"div">) {
57  return (
58    <div
59      data-slot="section-heading-body"
60      className={cn("max-w-2xl text-base text-pretty text-muted-foreground", className)}
61      {...props}
62    />
63  );
64}
65 
66function SectionHeadingActions({ className, ...props }: React.ComponentProps<"div">) {
67  return (
68    <div
69      data-slot="section-heading-actions"
70      className={cn("flex w-full flex-col gap-2 sm:w-fit sm:flex-row", className)}
71      {...props}
72    />
73  );
74}
75 
76export {
77  SectionHeading,
78  SectionHeadingActions,
79  SectionHeadingBody,
80  SectionHeadingTagline,
81  SectionHeadingTitle,
82};