ReactJS

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

5
type TBreakSize = 4 | 8 | 12 | 16 | 20;
6
type TDisplays = 'mobile' | 'tablet' | 'desktop';
7

8
interface IBreakProps {
9
  size: TBreakSize;
10
  mobileSize?: TBreakSize;
11
  tabletSize?: TBreakSize;
12
  desktopSize?: TBreakSize;
13
  inline?: boolean;
14
  top?: boolean;
15
}
16

17
export function Break(props: IBreakProps) {
18
  const {inline = false, top = false, size, mobileSize, tabletSize, desktopSize} = props;
19
  return (
20
    <div className={classNames(
21
      styles[`a${size}`],
22
      {[styles[`mobile_s${mobileSize}`]]: mobileSize},
23
      {[styles[`tablet_s${tabletSize}`]]: tabletSize},
24
      {[styles[`desktop_s${desktopSize}`]]: desktopSize},
25
      {[styles.inline]: inline},
26
      {[styles.top]: top}
27
    )}/>
28
  );
29
}
30