heading-with-anchor

1"use client";
2import { Link } from "@/components/primitives/link-with-transition";
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