Add anchor for every heading.
1"use client";
2import Link from "next/link";
3import { cn } from "@/lib/utils";
4import { Slot } from "@radix-ui/react-slot";
5import { type VariantProps, cva } from "class-variance-authority";
6import { LinkIcon } from "lucide-react";
7import React from "react";
8
9type AnchorProps = {
10 anchor?: string;
11 anchorVisibility?: "hover" | "always" | "never";
12 disableCopyToClipboard?: boolean;
13};
14
15const Anchor = ({
16 anchor,
17 disableCopyToClipboard = false,
18 anchorVisibility = "always",
19}: AnchorProps) => {
20 function copyToClipboard() {
21 if (disableCopyToClipboard) return;
22 const currentUrl = window.location.href.replace(/#.*$/, "");
23 const urlWithId = `${currentUrl}#${anchor}`;
24
25 void navigator?.clipboard?.writeText(urlWithId);
26 }
27
28 return (
29 <div
30 className={cn(
31 "ms-2 pt-1",
32 anchorVisibility === "always" && "visible",
33 anchorVisibility === "never" && "hidden",
34 anchorVisibility === "hover" && "invisible group-hover:visible",
35 )}
36 >
37 {/* modify `Link` to `a` if you are not using Next.js */}
38 <Link href={`#${anchor}`} onClick={copyToClipboard}>
39 <LinkIcon className="text-gray-600 hover:text-gray-400" />
40 </Link>
41 </div>
42 );
43};
44
45const headingVariants = cva("font-bold text-primary", {
46 variants: {
47 variant: {
48 h1: "leading-14 text-4xl lg:text-5xl",
49 h2: "leading-14 text-3xl lg:text-4xl",
50 h3: "leading-10 text-2xl lg:text-3xl",
51 h4: "leading-8 text-xl lg:text-2xl",
52 h5: "leading-8 text-lg lg:text-xl",
53 h6: "leading-7 text-sm lg:text-base",
54 p: "leading-5 text-lg lg:text-xl font-normal",
55 },
56 },
57 defaultVariants: {
58 variant: "h6",
59 },
60});
61
62type BaseHeadingProps = {
63 children?: React.ReactNode;
64 variant?: string;
65 className?: string;
66 asChild?: boolean;
67 anchor?: string;
68 anchorAlignment?: "close" | "spaced";
69 anchorVisibility?: "hover" | "always" | "never";
70 disableCopyToClipboard?: boolean;
71} & React.HTMLAttributes<HTMLHeadingElement> &
72 VariantProps<typeof headingVariants>;
73
74const BaseHeading = ({
75 children,
76 className,
77 variant = "h6",
78 asChild = false,
79 anchor,
80 anchorAlignment = "spaced",
81 anchorVisibility = "always",
82 disableCopyToClipboard = false,
83 ...props
84}: BaseHeadingProps) => {
85 const Comp = asChild ? Slot : variant;
86 return (
87 <>
88 <Comp
89 id={anchor}
90 {...props}
91 className={cn(
92 anchor && "flex scroll-m-20 items-center gap-1", // modify `scroll-m-20` according to your header height.
93 anchorAlignment === "spaced" && "justify-between",
94 anchorVisibility === "hover" && "group",
95 headingVariants({ variant, className }),
96 )}
97 >
98 {children}
99 {anchor && (
100 <Anchor
101 anchor={anchor}
102 anchorVisibility={anchorVisibility}
103 disableCopyToClipboard={disableCopyToClipboard}
104 />
105 )}
106 </Comp>
107 </>
108 );
109};
110
111type TypographyProps = Omit<BaseHeadingProps, "variant" | "asChild">;
112
113const H1 = (props: TypographyProps) => {
114 return <BaseHeading {...props} variant="h1" />;
115};
116
117const H2 = (props: TypographyProps) => {
118 return <BaseHeading {...props} variant="h2" />;
119};
120
121const H3 = (props: TypographyProps) => {
122 return <BaseHeading {...props} variant="h3" />;
123};
124
125const H4 = (props: TypographyProps) => {
126 return <BaseHeading {...props} variant="h4" />;
127};
128
129const H5 = (props: TypographyProps) => {
130 return <BaseHeading {...props} variant="h5" />;
131};
132
133const H6 = (props: TypographyProps) => {
134 return <BaseHeading {...props} variant="h6" />;
135};
136
137const P = (props: TypographyProps) => {
138 return <BaseHeading {...props} variant="p" />;
139};
140
141export { H1, H2, H3, H4, H5, H6, P };
142