Typography.tsx

Typography.tsx

import { PropsWithChildren, FC } from 'react'
import classnames from 'classnames'

type TypographyProps = PropsWithChildren<{ color?: string; className?: string; title?: string }>

export const H1: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <h1
    className={classnames([
      'font-semibold font-suisse',
      'text-[32px] leading-[40px] tracking-[-1px]',
      'md:text-[48px] md:leading-[55.2px] md:tracking-[-1px]',
      !color ? 'text-ink-primary' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </h1>
)

export const H2: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <h2
    className={classnames([
      'font-semibold font-suisse',
      'text-[24px] leading-[30px] tracking-[-.5px]',
      'md:text-[32px] md:leading-[40px] md:tracking-[-1px]',
      !color ? 'text-ink-primary' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </h2>
)

export const H3: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <h3
    className={classnames([
      'font-semibold font-suisse',
      'text-[18px] leading-[22.5px]',
      'md:text-[24px] md:leading-[30px] md:tracking-[-.5px]',
      !color ? 'text-ink-primary' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </h3>
)

export const H4: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <h4
    className={classnames([
      'font-semibold font-suisse',
      'text-[16px] leading-[24px]',
      'md:text-[18px] md:leading-[22.5px]',
      !color ? 'text-ink-primary' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </h4>
)

export const P1: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <p
    className={classnames([
      'font-normal font-suisse',
      'm-0 text-[16px] leading-[24px] tracking-[0px]',
      'md:text-[24px] md:leading-[32px] md:tracking-[0px]',
      !color ? 'text-ink-light' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </p>
)

export const P2: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <p
    className={classnames([
      'font-normal font-suisse',
      'm-0 text-[14px] leading-[20px] tracking-[0px]',
      'md:text-[20px] md:leading-[32px] md:tracking-[0px]',
      !color ? 'text-ink-light' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </p>
)

export const P3: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <p
    className={classnames([
      'font-normal font-suisse',
      'm-0 text-[14px] leading-[20px] tracking-[0px]',
      'md:text-[16px] md:leading-[24px] md:tracking-[0px]',
      !color ? 'text-ink-light' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </p>
)

export const P4: FC<TypographyProps> = ({
  children,
  color = '',
  className: customClasses,
  ...props
}) => (
  <p
    className={classnames([
      'font-normal font-suisse',
      'm-0 text-[12px] leading-[16px] tracking-[0px]',
      'md:text-[14px] md:leading-[20px] md:tracking-[0px]',
      !color ? 'text-ink-light' : color,
      customClasses,
    ])}
    {...props}
  >
    {children}
  </p>
)