jarv.is/components/Heading/Heading.tsx

import classNames from "classnames";
import type { HTMLAttributes } from "react";

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

type Props = HTMLAttributes<HTMLHeadingElement> & {
  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  id?: string;
  className?: string;
};

const Heading = ({ as: Component, id, className, children, ...rest }: Props) => {
  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={classNames("no-underline", styles.anchor)} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
      )}
    </Component>
  );
};

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

export default Heading;