jarv.is/components/Heading/Heading.tsx

import classNames from "classnames";
import innerText from "react-innertext";
import type { HTMLAttributes } from "react";

import styles from "./Heading.module.css";

export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
};

const Heading = ({ as: Component, id, className, children, ...rest }: HeadingProps) => {
  return (
    <Component className={classNames(styles.heading, styles[Component], className)} id={id} {...rest}>
      {children}

      {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
      {id && (Component === "h2" || Component === "h3") && (
        <a
          className={styles.anchor}
          href={`#${id}`}
          title={`Jump to "${innerText(children)}"`}
          tabIndex={-1}
          aria-hidden={true}
        />
      )}
    </Component>
  );
};

export const H1 = (props: Omit<HeadingProps, "as">) => <Heading as="h1" {...props} />;
export const H2 = (props: Omit<HeadingProps, "as">) => <Heading as="h2" {...props} />;
export const H3 = (props: Omit<HeadingProps, "as">) => <Heading as="h3" {...props} />;
export const H4 = (props: Omit<HeadingProps, "as">) => <Heading as="h4" {...props} />;
export const H5 = (props: Omit<HeadingProps, "as">) => <Heading as="h5" {...props} />;
export const H6 = (props: Omit<HeadingProps, "as">) => <Heading as="h6" {...props} />;

export default Heading;