1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
10 interface AttributeDataProps {
16 type AttributeProps = AttributeDataProps & WithStyles<CssRules>;
18 class Attribute extends React.Component<AttributeProps> {
21 return !!this.props.link;
25 const { label, link, value, children, classes } = this.props;
26 return <Typography component="div" className={classes.attribute}>
27 <Typography component="span" className={classes.label}>{label}</Typography>
29 <a href='{link}' className={classes.link} target='_blank'>{value}</a>
31 <Typography component="span" className={classes.value}>
41 type CssRules = 'attribute' | 'label' | 'value' | 'link';
43 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
48 marginBottom: theme.spacing.unit
51 color: theme.palette.grey["500"],
59 color: theme.palette.primary.main,
60 textDecoration: 'none'
64 export default withStyles(styles)(Attribute);