AERC
Adan Enrique Ramirez Cisneros

Status Update Modal - Copy this React, Tailwind Component to your project

Design a modal dialog for a web application that displays a status update for an employee's early exit request. The design should include the following features: Trigger Button: A button labeled "Open Modal" that opens the modal dialog when clicked. Approval Test Button: A button labeled "Approve Exit" outside the modal, which simulates the approval of the early exit request and updates the modal's content dynamically. Modal Title: Display "Awaiting Approval" by default. Change to "Early Exit Approved" when the approval test button is clicked. Modal Description: Show the text "Your early exit request is pending approval. Please wait for confirmation." initially. Change to "Your early exit request has been approved. You may now leave early." when the approval test button is clicked. Close Button: A dismiss button inside the modal labeled "Close" to close the modal dialog. Visuals: Include an animated loading spinner or progress indicator when the status is "Awaiting Approval." Use a checkmark icon or success indicator when the status changes to "Approved." Theme: Use a clean and professional color palette with shades of blue and white, rounded corners for the modal, and smooth animations for opening and closing. Responsiveness: Ensure the design is responsive for both desktop and mobile devices. Code Requirements: Generate the UI code in React with TypeScript, styled using Tailwind CSS or a similar modern CSS framework

Prompt
Component Preview

About

StatusUpdateModal - A responsive modal displaying status updates for exit requests. Features include dynamic content, approval button. Free code available!

Share

Last updated 1 month ago