joint_exc/frontend/src/components/DeleteStuffDialog.tsx

import {
  Dialog,
  DialogTitle,
  DialogContent,
  Button,
  Typography,
  DialogActions,
} from '@mui/material';

const DeleteStuffDialog = ({
  openDialog,
  setOpenDialog,
  stuffName,
  onSubmit,
}: {
  openDialog: boolean,
  setOpenDialog: (open: boolean) => void,
  stuffName: string,
  onSubmit: () => void,
}) => {

  {/* 削除ダイアログ */ }
  return <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}
    fullWidth
    maxWidth="sm"
    sx={{ overflow: "hidden" }}
  >
    <DialogTitle>食材の削除</DialogTitle>
    <DialogContent sx={{ wordBreak: 'break-word' }}>
      <Typography sx={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stuffName} を削除します。</Typography>
      <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
    </DialogContent>
    <DialogActions sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
      <Button onClick={() => setOpenDialog(false)} >キャンセル</Button>
      <Button variant="contained" color="error" onClick={() => {
        onSubmit();
        setOpenDialog(false); // 削除処理後にダイアログを閉じる
      }}>削除</Button>
    </DialogActions>
  </Dialog>

}

export default DeleteStuffDialog;