Styled Card - Copy this React, Mui Component to your project
i want to build beautify ai for applicants list page they iwll be who applied each will have accept and reject button and which user click accept or reject it will ask are yo sure question with yes or no , and u can use these color to make beautifu ui CE257A and my old code is import { useContext, useEffect, useState } from "react"; import { AppContext } from "../context/AppContext"; import { useParams } from "react-router-dom"; const ApplicantsListPage = () => { const { jobId } = useParams(); const { getApplicantsForJob, updateApplicationStatus } = useContext(AppContext); const [applicants, setApplicants] = useState([]); useEffect(() => { const fetchApplicants = async () => { const data = await getApplicantsForJob(jobId); console.log("Fetched applicants:", data); // Debugging setApplicants(data); console.log("jobId:", jobId); // Confirm jobId is valid }; fetchApplicants(); }, [jobId]); const handleStatusChange = async (applicationId, status) => { await updateApplicationStatus(applicationId, status); setApplicants( applicants.map((app) => app._id === applicationId ? { ...app, status } : app ) ); // Refresh the page if the application is accepted if (status === "accepted") { window.location.reload(); } }; return ( <div> <h1>Applicants for Job</h1> <ul> {applicants.map((applicant) => ( <li key={applicant._id}> <div> <h3>{applicant.applicant.name}</h3> <p>Email: {applicant.applicant.email}</p> <p>Phone: {applicant.applicant.phoneNumber}</p> <p>Category: {applicant.applicant.category}</p> <p>Experience: {applicant.applicant.experience}</p> <p>Education: {applicant.applicant.education}</p> <p>Status: {applicant.status}</p> <img src={applicant.applicant.image} alt="Applicant" width="100" /> </div> {applicant.status === "pending" && ( <> <button onClick={() => handleStatusChange(applicant._id, "accepted")} > Accept </button> <button onClick={() => handleStatusChange(applicant._id, "rejected")} > Reject </button> </> )} </li> ))} </ul> </div> ); }; export default ApplicantsListPage;
