conference-website/components/Typography/heading.tsx at 62200cda690a04b105b124cd00b250159d0e2320 · AceTheCreator/conference-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { JSX } from 'react';

type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

type TypeStyle =
  | 'heading-lg'
  | 'heading-md'
  | 'heading-md-semibold'
  | 'heading-sm'
  | 'heading-sm-semibold'
  | 'heading-xs'
  | 'heading-xs-semibold'
  | 'body-lg'
  | 'body-md'
  | 'body-sm';

interface IHeading {
  typeStyle?: TypeStyle;
  level?: HeadingLevel;
  textColor?: string;
  className?: string;
  children: React.ReactNode;
}

export default function Heading({
  typeStyle = 'heading-lg',
  level = 'h2',
  textColor = 'text-primary-800',
  className,
  children,
}: IHeading): JSX.Element {
  let classNames = '';
  const Tag = level as keyof JSX.IntrinsicElements;
  switch (typeStyle) {
    case 'heading-lg':
      classNames = `font-heading text-heading-md font-bold text-[60px] tracking-heading sm:text-[30px] lg:text-[40px] ${
        className || ''
      }`;
      break;
    case 'heading-md':
      classNames = `font-heading text-heading-md font-bold text-[40px] tracking-heading ${
        className || ''
      }`;
      break;
    case 'heading-md-semibold':
      classNames = `font-heading text-heading-md font-semibold tracking-heading ${
        className || ''
      }`;
      break;
    case 'heading-sm':
      classNames = `font-heading text-heading-sm font-bold tracking-heading ${
        className || ''
      }`;
      break;
    case 'heading-sm-semibold':
      classNames = `font-heading text-heading-sm font-semibold tracking-heading ${
        className || ''
      }`;
      break;
    case 'heading-xs':
      classNames = `font-heading text-heading-xs font-bold tracking-heading ${
        className || ''
      }`;
      break;
    case 'heading-xs-semibold':
      classNames = `font-heading text-heading-xs font-semibold tracking-heading ${
        className || ''
      }`;
      break;
    case 'body-lg':
      classNames = `font-heading text-body-lg tracking-body font-regular ${
        className || ''
      }`;
      break;
    case 'body-md':
      classNames = `font-heading text-body-md tracking-body font-regular ${
        className || ''
      }`;
      break;
    case 'body-sm':
      classNames = `font-heading text-body-lg tracking-body font-regular ${
        className || ''
      }`;
      break;
    default:
      classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${
        className || ''
      }`;
  }

  return <Tag className={`${textColor} ${classNames}`}>{children}</Tag>;
}