crtxdmp.

import React, { PropsWithChildren } from 'react';

import * as styles from './Breakpoint.module.scss';

type Props = {
    className?: string;
};

const Breakpoint: React.FC<PropsWithChildren<Props>> = (
  props: PropsWithChildren<Props>
): React.ReactElement => {
  return (
    <div
      className={[props.className, styles.root, 'text-white bg-dark'].join(' ')}
      data-testid={'breakpoint-root'}>
      <div className="d-none d-md-none d-sm-block">SM</div>
      <div className="d-none d-lg-none d-md-block">MD</div>
      <div className="d-none d-xl-none d-lg-block">LG</div>
      <div className="d-none d-xl-block">XL</div>
    </div>
  );
};

export { Breakpoint };

import { Breakpoint } from './Breakpoint';

export default Breakpoint;

.root {
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  text-align: center;
  box-sizing: content-box;
}