frontend/src/molecules/MenuItem.js

// a card item represent a news in newsSection
import { Card, Button } from "react-bootstrap";

export default function MenuItem({ dishName, description, imageSrc, deleteable = false, delButtonCallback = null }) {
    return (
        <Card className="align-items-center">
            <Card.Img variant="top" src={imageSrc} />
            <Card.Body>
                <Card.Title>{dishName}</Card.Title>
                <Card.Text>
                    {description}
                </Card.Text>
                {deleteable ? (
                    <div className="d-flex justify-content-end pb-3">
                        <Button size='sm' onClick={delButtonCallback} variant='danger'
                            style={{
                                position: 'absolute',
                                bottom: '20px',  // Khoảng cách từ dưới lên
                                right: '20px'    // Khoảng cách từ phải qua
                            }}>
                            Xóa
                        </Button>
                    </div>
                ) : (<></>)}
            </Card.Body>
        </Card>
    );
}