Page MenuHomec4science
Files F69399184

TermCard.md
No OneTemporary
Actions

File Metadata

Created
Mon, Jul 1, 15:17

TermCard.md
View Options

### Description
Recieve data for each term and display all the important condition.
```js
import React from "react"
import { makeStyles, withStyles } from '@material-ui/core/styles';
import "./termcard.css"
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Typography from '@material-ui/core/Typography';
import DateRangeIcon from '@material-ui/icons/DateRange';
import { FaCoins, FaHandshake, FaRegHandshake, FaUserGraduate} from 'react-icons/fa';
import { GoLaw } from 'react-icons/go';
import { BsNewspaper } from 'react-icons/bs'
import { RiFilePaper2Line } from 'react-icons/ri';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import { GrInfo } from "react-icons/gr";
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Tooltip from '@material-ui/core/Tooltip';
import { FiFlag } from 'react-icons/fi';
const useStyles = makeStyles((theme) =>({
card: {
width: '100%',
marginTop: "1rem",
textAlign:'left'
},
root: {
flexGrow: 1,
textAlign:'left',
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'lightGrey',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 220,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
const classes = useStyles();
<Card key="3" className="term-Card"
style={{ textAlign: "left"}}
>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Term ID: 4
<p><small>Condition type: <FaUserGraduate />Organization only</small></p>
<p><small>Condition type: <FaRegHandshake />Organization/journal</small></p>
<p><small>Condition type: <BsNewspaper />Journal Only</small></p>
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
</Typography>
<Typography variant="body2" component="p">
<Container maxWidth="xs" >
<Grid container>
<Grid item xs={6} sm={2}>
{/* filter Unknow cost factor type to not display */}
<Tooltip disableFocusListener title="{i.comment}" arrow>
<Button>
<Chip
key="4"
size="small"
avatar={<FaCoins />}
label="100000£"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
</Button>
</Tooltip>
<Button href="www.google.com" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <RiFilePaper2Line />}
label="ABR"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF", textAlign: "left"}}
title="Licence Information"
/>
</Button>
<Chip
size="small"
avatar={<DoneIcon />}
label={"IR Archiving"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#DAF7A6"}}
title="This is more information"
/>
<Chip
size="small"
avatar={<HighlightOffIcon />}
label="IR Archiving"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#f50057"}}
title="This is more information"
/>
<Chip
size="small"
avatar={<DateRangeIcon />}
label="embargo month"
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
</Grid>
</Grid>
</Container>
<div
style={{ marginTop: "1rem"}}
>
<div style={{ textAlign: "left"}}>
<p>
<small>
<GrInfo
style={{
padding: "0.05rem"
}}
/>
comment
</small>
</p>
</div>
</div>
</Typography>
</CardContent>
<CardActions>
<Button href="thisisasource.com" variant="outlined" target="blank" rel="noopener noreferrer" size="small"><HiLink/>
<i style={{fontSize: "70%"}}>
More Information
</i>
</Button>
<Button variant="outlined" color="secondary" size="small"><FiFlag/>
<i style={{fontSize: "70%"}}>
Modification Request
</i>
</Button>
</CardActions>
</Card>
```

Event Timeline

c4science · Help