ReactJS
1import React from 'react';
2import styles from './break.css';
3import classNames from "classnames";
4
5type TBreakSize = 4 | 8 | 12 | 16 | 20;
6type TDisplays = 'mobile' | 'tablet' | 'desktop';
7
8interface IBreakProps {
9size: TBreakSize;
10mobileSize?: TBreakSize;
11tabletSize?: TBreakSize;
12desktopSize?: TBreakSize;
13inline?: boolean;
14top?: boolean;
15}
16
17export function Break(props: IBreakProps) {
18const {inline = false, top = false, size, mobileSize, tabletSize, desktopSize} = props;
19return (
20<div className={classNames(
21styles[`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