Fs Software Engineer Project Specific

Sure! As a Senior Full Stack Software Engineer, here's a draft of a 2 button modal that's fully customizable and features a header section and a message body. The layout will be a card style with no close button in the corner, only the confirm and deny buttons. Additionally, it will listen for clickaways and escape presses only when the modal is open. We'll start by creating a new component Modal.js in our components directory. This component will contain the HTML structure and styling for our modal. Here's an example structure for our Modal.js component: jsx Copy code import React from 'react'; const Modal = ({ title, message, confirmText, denyText, onConfirm, onDeny, isOpen }) => { const handleConfirm = () => { onConfirm(); }; const handleDeny = () => { onDeny(); }; const handleKeyDown = (event) => { if (event.key === 'Escape') { onDeny(); } }; const handleClickAway = (event) => { if (event.target.className === 'modal') { onDeny(); } }; if (!isOpen) { return null; } return ( <div className="fixed z-10 inset-0 overflow-y-auto" onClick={handleClickAway}> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="fixed inset-0 transition-opacity"> <div className="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <span className="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203; <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline" onKeyDown={handleKeyDown}> <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="sm:flex sm:items-start"> <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> {/* Header Icon */} </div> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline"> {title} </h3> <div className="mt-2"> <p className="text-sm leading-5 text-gray-500"> {message} </p> </div> </div> </div> </div> <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <span className="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto"> <button onClick={handleConfirm} type="button" className="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5"> {confirmText} </button> </span> <span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"> <button onClick={handleDeny} type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"> {denyText} </button> </span> </div> </div> </div> </div> ); }; export default Modal; As you can see, this component takes in several props such as: `title`, `message`, `confirmText`, `denyText`, `onConfirm`, `onDeny`, and `isOpen`. `title` and `message` are strings that represent the header and message of the modal, respectively. `confirmText` and `denyText` are strings that represent the text on the confirm and deny buttons, respectively. `onConfirm` and `onDeny` are callback functions that will be called when the confirm and deny buttons are clicked, respectively. `isOpen` is a boolean value that represents whether the modal should be shown or not. The `Modal` component also includes event listeners for the Escape key and clickaways, which will call the `onDeny` function when triggered. This ensures that the modal can only be closed by clicking one of the buttons or pressing the Escape key. To use this component in our app, we can import it into our desired component and pass in the necessary props. Here's an example of how we can use the `Modal` component in another component: ```jsx import React, { useState } from 'react'; import Modal from './Modal'; const MyComponent = () => { const [isOpen, setIsOpen] = useState(false); const handleConfirm = () => { // Do something on confirm setIsOpen(false); }; const handleDeny = () => { // Do something on deny setIsOpen(false); }; return ( <> <button onClick={() => setIsOpen(true)}>Open Modal</button> <Modal title="Confirmation" message="Are you sure you want to proceed?" confirmText="Confirm" denyText="Cancel" onConfirm={handleConfirm} onDeny={handleDeny} isOpen={isOpen} /> </> ); }; export default MyComponent; In this example, we've created a new component MyComponent which renders a button that, when clicked, sets the isOpen state to true, thereby showing the Modal component. We've also defined handleConfirm and handleDeny functions that will be called when the confirm and deny buttons are clicked, respectively. These functions can perform any necessary actions and set the isOpen state to false, which will close the modal. I hope this helps! Let me know if you have any questions or need further assistance.