import { Helmet } from 'react-helmet-async' ; import { useState } from 'react' ; import PageTitle from 'src/components/PageTitle' ; import PageTitleWrapper from 'src/components/PageTitleWrapper' ; import { Container , Grid , Card , CardHeader , CardContent , Divider } from '@mui/material' ; import Footer from 'src/components/Footer' ; import CardActions from '@mui/material/CardActions' ; import { styled } from '@mui/material/styles' ; import Button from '@mui/material/Button' ; import Box from '@mui/material/Box' ; import CardMedia from '@mui/material/CardMedia' ; import Collapse from '@mui/material/Collapse' ; import Avatar from '@mui/material/Avatar' ; import IconButton , { IconButtonProps } from '@mui/material/IconButton' ; import Typography from '@mui/material/Typography' ; import { red } from '@mui/material/colors' ; import FavoriteIcon from '@mui/icons-material/Favorite' ; import ShareIcon from '@mui/icons-material/Share' ; import ExpandMoreIcon from '@mui/icons-material/ExpandMore' ; import MoreVertIcon from '@mui/icons-material/MoreVert' ; interface ExpandMoreProps extends IconButtonProps { expand : boolean ; } const ExpandMore = styled ( ( props ) => { const { expand , ... other } = props ; return < IconButton { ... other } / > ; } ) ( ( { theme , expand } ) => ( { transform : ! expand ? 'rotate(0deg)' : 'rotate(180deg)' , marginLeft : 'auto' , transition : theme . transitions . create ( 'transform' , { duration : theme . transitions . duration . shortest , } ) , } ) ) ; const bull = ( < Box component = "span" sx = { { display : 'inline-block' , mx : '2px' , transform : 'scale(0.8)' } } > • < /Box>); function Cards ( ) { const [ expanded , setExpanded ] = useState ( false ) ; const handleExpandClick = ( ) => { setExpanded ( ! expanded ) ; } ; return ( < > < Helmet > < title > Cards - Components < /title> < /Helmet> < PageTitleWrapper > < PageTitle heading = "Cards" subHeading = "Cards contain content and actions about a single subject." docs = "https://material-ui.com/components/cards/" / > < /PageTitleWrapper> < Container maxWidth = "lg" > < Grid container direction = "row" justifyContent = "center" alignItems = "stretch" spacing = { 3 } > < Grid item xs = { 12 } > < Card > < CardHeader title = "Basic" / > < Divider /> < CardContent > < Card sx = { { minWidth : 275 } } > < CardContent > < Typography sx = { { fontSize : 14 } } color = "text.secondary" gutterBottom > Word of the Day < /Typography> < Typography variant = "h5" component = "div" > be { bull } nev { bull } o { bull } lent < /Typography> < Typography sx = { { mb : 1.5 } } color = "text.secondary" > adjective < /Typography> < Typography variant = "body2" > well meaning and kindly . < br / > { '"a benevolent smile"' } < /Typography> < /CardContent> < CardActions > < Button size = "small" > Learn More < /Button> < /CardActions> < /Card> < /CardContent> < /Card> < /Grid> < Grid item xs = { 12 } > < Card > < CardHeader title = "Complex Example" / > < Divider /> < CardContent > < Card sx = { { maxWidth : 345 } } > < CardHeader avatar = { < Avatar sx = { { bgcolor : red [ 500 ] } } aria - label = "recipe" > R < /Avatar>} action={<IconButton aria-label="settings"> < MoreVertIcon / > < /IconButton>} title="Shrimp and Chorizo Paella" subheader="September 14, 2016"/ > < CardMedia sx = { { height : 0 , paddingTop : '56.25%' , } } image = "/static/images/placeholders/covers/1.jpg" title = "Paella dish" / > < CardContent > < Typography variant = "body2" color = "text.secondary" > This impressive paella is a perfect party dish and a fun meal to cook together with your guests . Add 1 cup of frozen peas along with the mussels , if you like . < /Typography> < /CardContent> < CardActions disableSpacing > < IconButton aria - label = "add to favorites" > < FavoriteIcon /> < /IconButton> < IconButton aria - label = "share" > < ShareIcon /> < /IconButton> < ExpandMore expand = { expanded } onClick = { handleExpandClick } aria - expanded = { expanded } aria - label = "show more" > < ExpandMoreIcon /> < /ExpandMore> < /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> < /CardContent> < /Card> < /Grid> < Grid item xs = { 12 } > < Card > < CardHeader title = "Media" / > < Divider /> < CardContent > < Card sx = { { maxWidth : 345 } } > < CardMedia sx = { { height : 140 } } image = "/static/images/placeholders/covers/6.jpg" title = "Contemplative Reptile" / > < CardContent > < Typography gutterBottom variant = "h5" component = "div" > Lizard < /Typography> < Typography variant = "body2" color = "text.secondary" > Lizards are a widespread group of squamate reptiles , with over 6 , 000 species , ranging across all continents except Antarctica < /Typography> < /CardContent> < CardActions > < Button size = "small" > Share < /Button> < Button size = "small" > Learn More < /Button> < /CardActions> < /Card> < /CardContent> < /Card> < /Grid> < /Grid> < /Container> < Footer / > < />); } export default Cards ;