artcraft/app/components/Typography.tsx

import { NavLink, NavLinkProps } from "@remix-run/react";
import { LabelHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

interface TypoProps {
  className?: string;
  children: React.ReactNode;
}
const baseTypo = "text-white";

export const H1 = ({ className, children }: TypoProps) => (
  <h1 className={twMerge(baseTypo, "text-2xl font-medium", className)}>{children}</h1>
);

export const H2 = ({ className, children }: TypoProps) => (
  <h2 className={twMerge(baseTypo, "text-xl font-medium", className)}>{children}</h2>
);

export const H3 = ({ className, children }: TypoProps) => (
  <h3 className={twMerge(baseTypo, "text-lg font-medium", className)}>{children}</h3>
);

export const H4 = ({ className, children }: TypoProps) => (
  <h4 className={twMerge(baseTypo, "text-base font-medium", className)}>{children}</h4>
);

export const Label = ({ 
  className, children, ...rest
}: LabelHTMLAttributes<HTMLLabelElement>) => (
  <label
    className={twMerge(baseTypo, "mb-2 text-base font-medium", className)}
    {...rest}
  >
      {children}
  </label>
);

export const H5 = ({ className, children }: TypoProps) => (
  <h5 className={twMerge(baseTypo, "text-sm font-medium", className)}>{children}</h5>
);

export const H6 = ({ className, children }: TypoProps) => (
  <h6 className={twMerge(baseTypo, "text-sm font-light", className)}>{children}</h6>
);

export const Link = ({className, ...rest}:NavLinkProps)=>
  <NavLink
    className={twMerge(
      "text-brand-primary hover:text-brand-primary-400",
      className as string,
    )}
    {...rest}
  />

export const P = ({ className, children }: TypoProps) => (
  <p className={twMerge(baseTypo, className)}> {children} </p>
);