Page MenuHomec4science
Files F63631662

DetailCard.js
No OneTemporary
Actions

File Metadata

Created
Tue, May 21, 11:56

DetailCard.js
View Options

import React, {useContext} from "react"
import { makeStyles } from '@material-ui/core/styles';
import { Container, Row, Col } from 'react-bootstrap';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import "./termcard.css"
import { HiLink } from "react-icons/hi";
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
card: {
width: '100%',
marginTop: "1rem",
display: "flex",
alignItems: "left",
justifyContent: "left"
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
function DetailsCard({details}, {details2}) {
const classes = useStyles();
if (details !== 'null') {
return (
<div>
<Card style={{ maxWidth: "16rem", height:"auto"}}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<h4>{details.name}</h4>
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
{details.country && details.country.map(item => {
return <div key={item.id}>{item.name}</div>;
})}
</Typography>
<Typography variant="body2" component="p">
{details.oa_status ?
<div>
{details.oa_status.status !== "UNKNOWN" ?
<div>
<p>Open Acces Status: {details.oa_status.status}</p>
<p>{details.oa_status.description}</p>
</div>
:null}
</div>
:null}
{details.publisher && details.publisher.map(item => {
return <div key={item.id}> Publisher: {item.name}</div>;
})}
</Typography>
</CardContent>
<CardActions>
{details.website ?
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
:null}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
:null}
</CardActions>
</Card>
{/* </Typography> */}
{/* </AccordionDetails>
</Accordion> */}
</div>
)
}
else if (details !== 'null' && details2 !== 'null') {
return (<div>
{details2.name} </div>)
}
else {
return null
}
}
export default DetailsCard

Event Timeline

c4science · Help