58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import Card from '@material-ui/core/Card';
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import { Link } from 'react-router-dom';
|
|
import Link1 from '@material-ui/core/Link';
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
import CardMedia from '@material-ui/core/CardMedia';
|
|
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
picture: {
|
|
|
|
}
|
|
}));
|
|
function ListItemLink(props) {
|
|
return <ListItem button component={Link1} {...props} />;
|
|
}
|
|
|
|
export default function ResourceCard(props) {
|
|
const classes = useStyles();
|
|
const [picture, setPicture] = React.useState(null);
|
|
|
|
var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]
|
|
|
|
|
|
const loadResourcePicture = async () => {
|
|
await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
|
|
var img = URL.createObjectURL(blob);
|
|
setPicture(img);
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
if (picture === null)
|
|
loadResourcePicture();
|
|
|
|
return (
|
|
|
|
<Grid item xs={4} lg={2} key={props.resource["name"]}>
|
|
<Card >
|
|
<CardContent style={{ padding: 0 }}>
|
|
<ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}>
|
|
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
|
|
<ListItemText primary={props.resource["name"]} />
|
|
</ListItemLink>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
|
|
);
|
|
}
|