假借一個情境 放假時 你要收到老闆催促的郵件

咒語:創建一個電子郵件客戶端頁面，包括收件箱、郵件列表和郵件詳情，使用 Material-UI 的表格、卡片和對話框組件。

import React, { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Card,
  CardContent,
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button
} from "@mui/material";

const sampleEmails = [
  {
    id: 1,
    sender: "john@example.com",
    subject: "Hello",
    message: "Hi there!"
  },
  {
    id: 2,
    sender: "jane@example.com",
    subject: "Meeting",
    message: "Let's meet at 3 PM."
  },
  {
    id: 3,
    sender: "bob@example.com",
    subject: "Report",
    message: "Here's the monthly report."
  }
];

const EmailClient = () => {
  const [emails] = useState(sampleEmails);
  const [selectedEmail, setSelectedEmail] = useState(null);

  const handleEmailClick = (email) => {
    setSelectedEmail(email);
  };

  const handleCloseDialog = () => {
    setSelectedEmail(null);
  };

  return (
    <div>
      <h1>收件箱</h1>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>寄件人</TableCell>
              <TableCell>主題</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {emails.map((email) => (
              <TableRow
                key={email.id}
                onClick={() => handleEmailClick(email)}
                style={{ cursor: "pointer" }}
              >
                <TableCell>{email.sender}</TableCell>
                <TableCell>{email.subject}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <Dialog
        open={selectedEmail !== null}
        onClose={handleCloseDialog}
        fullWidth
        maxWidth="md"
      >
        {selectedEmail && (
          <>
            <DialogTitle>{selectedEmail.subject}</DialogTitle>
            <DialogContent>
              <DialogContentText>{selectedEmail.sender}</DialogContentText>
              <DialogContentText>{selectedEmail.message}</DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleCloseDialog} color="primary">
                關閉
              </Button>
            </DialogActions>
          </>
        )}
      </Dialog>
    </div>
  );
};

export default EmailClient;

這樣富含假資料的 郵件箱就製作完成了