Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

rOACCT/assets/src/components/DetailCard.js
50e211de51cdissn4frontend

Last Change
Raw File

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 InfoIcon from '@material-ui/icons/Info';
import "./termcard.css"
const useStyles = makeStyles((theme) =>({
card: {
width: '33%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
function DetailsCard({details}) {
const classes = useStyles();
if (details !== 'null') {
// details.country.map(i =>(
// console.log(i.name)
// ))
console.log(details.country)
return (
<div className={classes.root}>
<Accordion key={details.id}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
{details.name}
{/* {details2 ? details2.name
:null} */}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Card className={classes.root}>
<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">
{/* {countries} */}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small">Open Access Options</Button>
:null}
</Typography>
<Typography variant="body2" component="p">
</Typography>
</CardContent>
<CardActions>
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small">Learn More</Button>
</CardActions>
</Card>
</Typography>
</AccordionDetails>
</Accordion>
</div>
)
}
else {
return null
}
}
export default DetailsCard
c4science · Help