Mail Table - Copy this React, Tailwind Component to your project

import { useState } from "react"; import { FiMail } from "react-icons/fi"; import { AiOutlineClose } from "react-icons/ai"; const MailTable = () => { const [isDialogOpen, setIsDialogOpen] = useState(false); const [selectedMail, setSelectedMail] = useState(null); const mockEmails = [ { id: 1, from: "john.doe@example.com", subject: "Weekly Project Update", date: "2024-01-15T10:30:00", }, { id: 2, from: "sarah.smith@example.com", subject: "Meeting Schedule for Tomorrow", date: "2024-01-15T09:15:00", }, { id: 3, from: "tech.team@example.com", subject: "System Maintenance Notice", date: "2024-01-14T16:45:00", }, { id: 4, from: "marketing@example.com", subject: "Q1 Campaign Results", date: "2024-01-14T14:20:00", }, ]; const handleReceive = (email) => { setSelectedMail(email); setIsDialogOpen(true); }; const handleConfirm = () => { console.log("Email received:", selectedMail); setIsDialogOpen(false); setSelectedMail(null); }; const handleCancel = () => { setIsDialogOpen(false); setSelectedMail(null); }; const formatDate = (dateString) => { const options = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }; return new Date(dateString).toLocaleDateString("en-US", options); }; return ( <div className="container mx-auto p-4"> <div className="overflow-x-auto bg-white rounded-lg shadow"> <table className="min-w-full table-auto"> <thead> <tr className="bg-gray-50"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {mockEmails.map((email) => ( <tr key={email.id} className="hover:bg-gray-50"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{email.from}</td> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{email.subject}</td> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{formatDate(email.date)}</td> <td className="px-6 py-4 whitespace-nowrap text-sm"> <button onClick={() => handleReceive(email)} className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200" aria-label="Receive email" > <FiMail className="mr-2" /> Receive </button> </td> </tr> ))} </tbody> </table> </div> {isDialogOpen && ( <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"> <div className="fixed inset-0 z-10 overflow-y-auto"> <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"> <div className="absolute right-0 top-0 pr-4 pt-4"> <button type="button" className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" onClick={handleCancel} > <span className="sr-only">Close</span> <AiOutlineClose className="h-6 w-6" /> </button> </div> <div className="sm:flex sm:items-start"> <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left"> <h3 className="text-lg font-medium leading-6 text-gray-900"> Confirm Receive </h3> <div className="mt-2"> <p className="text-sm text-gray-500"> Are you sure you want to receive this email from {selectedMail?.from}? </p> </div> </div> </div> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <button type="button" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" onClick={handleConfirm} > Confirm </button> <button type="button" className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" onClick={handleCancel} > Cancel </button> </div> </div> </div> </div> </div> )} </div> ); }; export default MailTable;