40 lines
1.9 KiB
JavaScript
40 lines
1.9 KiB
JavaScript
import {Card} from "@mui/material";
|
|
import Stack from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
import React from "react";
|
|
import Typography from "@mui/material/Typography";
|
|
import {Counter} from "./Counter";
|
|
|
|
export function CocktailItemCalc({cocktail, deleteHandler, changeHandler}) {
|
|
return (
|
|
<Card sx={{mb: 1, display: 'relative', p: 2}}>
|
|
<Stack justifyContent={'start'} spacing={2}>
|
|
<Stack direction='row' justifyContent='start' alignItems='center'>
|
|
<Box sx={{width: '100px', height: '100px'}}>
|
|
<img src={cocktail.image} loading='lazy' height={'100px'} width={'100px'} alt={cocktail.id}/>
|
|
</Box>
|
|
<Box sx={{width: 'calc(90% - 100px)', pr: 2, ml: 2}}>
|
|
<Stack>
|
|
<Typography>{cocktail.name}</Typography>
|
|
<Typography>{cocktail.volume}</Typography>
|
|
<Typography>{cocktail.category}</Typography>
|
|
<Typography>{cocktail.alcoholic}</Typography>
|
|
<Typography color={'textSecondary'}>{cocktail.components}</Typography>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack direction='row'>
|
|
<Stack sx={{width: '5%'}} spacing={1} justifyContent='flex-start'>
|
|
<IconButton size='small' onClick={() => deleteHandler(cocktail.id)}>
|
|
<DeleteIcon/>
|
|
</IconButton>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
<Counter id={cocktail.id} changeHandler={changeHandler}/>
|
|
</Stack>
|
|
</Card>
|
|
)
|
|
} |