import styled , { css } from 'reshadow' ; import { ComponentStyle , composes , useStyles } from '@cloudbeaver/core-theming' ; interface Props { description ? : React . ReactElement | string ; before ? : React . ReactElement ; after ? : React . ReactElement ; style ? : ComponentStyle ; className ? : string ; } const styles = composes ( css `
    cell {
      composes: theme-ripple from global;
    }  
` , css `
    main {
      position: relative;
      display: flex;
      align-items: center;
      padding: 8px;
    }
    before {
      margin-right: 16px;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    after {
      margin-left: 16px;
      flex-shrink: 0;
    }
    info {
      composes: theme-typography--body2 from global;
      flex: 1;
      line-height: 1.4;
      display: flex;
      flex-direction: column;
      font-weight: 500;
    }
    description {
      composes: theme-typography--caption from global;
      line-height: 1.2;
    }
` ) ; export const Cell = function Cell ( { before , after , description , style , className , children } ) { return styled ( useStyles ( styles , style ) ) ( < cell className = { className } > < main > < before > { before } < /before> < info > { children } { description && < description > { description } < /description>} < /info> < after > { after } < /after> < /main> < /cell>); } ;