ReactJS

1
import React from 'react';
2
import styles from './text.css';
3
import classNames from 'classnames';
4

5
type TSizes = 28 | 20 | 16 | 14 | 12 | 10;
6

7
export enum EColors {
8
  black = 'black',
9
  orange = 'orange',
10
  green = 'green',
11
  white = 'white',
12
  greyF4 = 'greyF4',
13
  greyF3 = 'greyF3',
14
  greyD9 = 'greyD9',
15
  greyC4 = 'greyC4',
16
  grey99 = 'grey99',
17
  grey66 = 'grey66'
18
}
19

20
interface ITextProps {
21
  As?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'div';
22
  children?: React.ReactNode;
23
  size: TSizes;
24
  mobileSize?: TSizes;
25
  tabletSize?: TSizes;
26
  desktopSize?: TSizes;
27
  color?: EColors,
28
  bold?: boolean
29
}
30

31
export function Text(props: ITextProps) {
32
  const {As = 'span', color = EColors.black, children, size, mobileSize, tabletSize, desktopSize, bold} = props;
33
  const classes = classNames(
34
    styles[`s${size}`],
35
    { [styles.bold]: bold},
36
    {[styles[`m${mobileSize}`]]: mobileSize},
37
    {[styles[`t${tabletSize}`]]: tabletSize},
38
    {[styles[`d${desktopSize}`]]: desktopSize},
39
    styles[color]
40
  )
41
  return (
42
    <As className={classes}>
43
      {children}
44
    </As>
45
  );
46
}
47