src/components/attribute/attribute.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import Typography from '@material-ui/core/Typography';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from 'src/common/custom-theme';
   9
  10 interface AttributeDataProps {
  11     label: string;
  12 }
  13
  14 type AttributeProps = AttributeDataProps & WithStyles<CssRules>;
  15
  16 class Attribute extends React.Component<AttributeProps> {
  17
  18     render() {
  19         const { label, children, classes } = this.props;
  20         return <Typography component="div" className={classes.attribute}>
  21                 <span className={classes.label}>{label}</span>
  22                 <span className={classes.value}>{children}</span>
  23             </Typography>;
  24     }
  25
  26 }
  27
  28 type CssRules = 'attribute' | 'label' | 'value';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     attribute: {
  32         display: 'flex',
  33         alignItems: 'center',
  34         marginBottom: theme.spacing.unit
  35     },
  36     label: {
  37         color: theme.palette.grey["500"],
  38         width: '40%'
  39     },
  40     value: {
  41         display: 'flex',
  42         alignItems: 'center'
  43     }
  44 });
  45
  46 export default withStyles(styles)(Attribute);