Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (paginated-inlines) Browse

rOACCT/assets/src/components/journalCard.js
0f039a907768paginated-inlines

Last Change
Raw File

journalCard.js
View Options

import React from "react";
import { Card, Accordion } from 'react-bootstrap';
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'primary',
height: 48,
padding: '0 30px',
},
card: {
width: '100%',
marginTop: "1rem"
}
});
const handleClick = () => {
console.info('You clicked the Chip.');
};
export default function JournalCard({journal}){
const classes = useStyles();
return (
<Accordion defaultActiveKey="0">
<Card className={classes.card} >
<Accordion.Toggle as={Card.Header} eventKey="0">
{journal.name}
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body >
<Card.Title> <h3>{journal.name}</h3></Card.Title>
<Card.Subtitle className="mb-2 text-muted">Since {journal.starting_year}
</Card.Subtitle>
<Card.Text>
<h5>ISSN</h5>
<ul>
{journal.issn.map(item => (
<li>{item}</li>
))}
</ul>
{journal.oa_status ? (
<Chip
size="small"
avatar={<DoneIcon />}
label="OA Status"
clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#cddc39"}}
/>
): (
<Chip
size="small"
avatar={<HighlightOffIcon />}
label="OA Status"
clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#f50057"}}
/>
)
}
</Card.Text>
<Card.Link href="#">{journal.website}</Card.Link>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
)
}
c4science · Help