114 lines
4.2 KiB
JavaScript
114 lines
4.2 KiB
JavaScript
import React from "react";
|
||
import PropTypes from "prop-types";
|
||
import { makeStyles } from "@material-ui/core/styles";
|
||
import clsx from "clsx";
|
||
import Card from "@material-ui/core/Card";
|
||
import CardHeader from "@material-ui/core/CardHeader";
|
||
import CardContent from "@material-ui/core/CardContent";
|
||
import CardActions from "@material-ui/core/CardActions";
|
||
import Collapse from "@material-ui/core/Collapse";
|
||
import Avatar from "@material-ui/core/Avatar";
|
||
import IconButton from "@material-ui/core/IconButton";
|
||
import Typography from "@material-ui/core/Typography";
|
||
import FavoriteIcon from "@material-ui/icons/Favorite";
|
||
import ShareIcon from "@material-ui/icons/Share";
|
||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||
import MoreVertIcon from "@material-ui/icons/MoreVert";
|
||
import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
|
||
import styles from "../../../components/common/styles/expandableCardStyles";
|
||
import ServerSummary from "./ServerSummary";
|
||
import { useTranslation } from "react-i18next";
|
||
|
||
const useStyles = makeStyles(styles);
|
||
|
||
const ServerComponent = ({ data, openAbout }) => {
|
||
const classes = useStyles();
|
||
const { t } = useTranslation();
|
||
|
||
const [expanded, setExpanded] = React.useState(false);
|
||
|
||
const handleExpandClick = () => {
|
||
setExpanded(!expanded);
|
||
};
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader
|
||
avatar={
|
||
<Avatar aria-label="recipe" className={classes.avatar}>
|
||
<DnsRoundedIcon />
|
||
</Avatar>
|
||
}
|
||
action={
|
||
<IconButton aria-label="settings">
|
||
<MoreVertIcon />
|
||
</IconButton>
|
||
}
|
||
title={<strong>{t("Server.Title")}</strong>}
|
||
subheader={`${t("Server.Host")}: ${
|
||
data.hosts ? data.hosts.server : ""
|
||
}`}
|
||
/>
|
||
<CardContent>
|
||
{data.loaded && <ServerSummary data={data} openAbout={openAbout} />}
|
||
</CardContent>
|
||
<CardActions disableSpacing>
|
||
<IconButton aria-label="add to favorites">
|
||
<FavoriteIcon />
|
||
</IconButton>
|
||
<IconButton aria-label="share">
|
||
<ShareIcon />
|
||
</IconButton>
|
||
<IconButton
|
||
className={clsx(classes.expand, {
|
||
[classes.expandOpen]: expanded
|
||
})}
|
||
onClick={handleExpandClick}
|
||
aria-expanded={expanded}
|
||
aria-label="show more"
|
||
>
|
||
<ExpandMoreIcon />
|
||
</IconButton>
|
||
</CardActions>
|
||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||
<CardContent>
|
||
<Typography paragraph>Method:</Typography>
|
||
<Typography paragraph>
|
||
Heat 1/2 cup of the broth in a pot until simmering, add saffron and
|
||
set aside for 10 minutes.
|
||
</Typography>
|
||
<Typography paragraph>
|
||
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
|
||
over medium-high heat. Add chicken, shrimp and chorizo, and cook,
|
||
stirring occasionally until lightly browned, 6 to 8 minutes.
|
||
Transfer shrimp to a large plate and set aside, leaving chicken and
|
||
chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes,
|
||
onion, salt and pepper, and cook, stirring often until thickened and
|
||
fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2
|
||
cups chicken broth; bring to a boil.
|
||
</Typography>
|
||
<Typography paragraph>
|
||
Add rice and stir very gently to distribute. Top with artichokes and
|
||
peppers, and cook without stirring, until most of the liquid is
|
||
absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved
|
||
shrimp and mussels, tucking them down into the rice, and cook again
|
||
without stirring, until mussels have opened and rice is just tender,
|
||
5 to 7 minutes more. (Discard any mussels that don’t open.)
|
||
</Typography>
|
||
<Typography>
|
||
Set aside off of the heat to let rest for 10 minutes, and then
|
||
serve.
|
||
</Typography>
|
||
</CardContent>
|
||
</Collapse>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
ServerComponent.propTypes = {
|
||
data: PropTypes.object.isRequired,
|
||
openAbout: PropTypes.func.isRequired
|
||
};
|
||
|
||
export default ServerComponent;
|