grafana-data-exporter-app/src/components/GBlock/Block.tsx

import { css } from '@emotion/css';
import React, { FC, HTMLAttributes } from 'react';

// import './Block.module.scss';

interface BlockProps extends HTMLAttributes<HTMLElement> {
  bordered?: boolean;
  shadowed?: boolean;
  withBackground?: boolean;
  hover?: boolean;
  fullWidth?: boolean;
}

const Block: FC<BlockProps> = (props) => {
  const {
    children,
    style,
    className,
    bordered = false,
    fullWidth = false,
    hover = false,
    shadowed = false,
    withBackground = false,
    ...rest
  } = props;

  return (
    <div
      className={css('root', className, {
        root_bordered: bordered,
        root_shadowed: shadowed,
        'root--fullWidth': fullWidth,
        'root--withBackground': withBackground,
        'root--hover': hover,
      })}
      style={style}
      {...rest}
    >
      {children}
    </div>
  );
};

export default Block;