A
Anonymous

Styled Dialog - Copy this React, Mui Component to your project

4.-Reject-Dialog-(components_vetting_reject-dialog.jsx)-Purpose:-Allow-users-to-reject-selected-service-providers-with-a-reason.-Components:-Dialog:-A-modal-dialog-for-confirming-rejection.-Text:-Warning-message-about-the-irreversible-nature-of-the-action.-Textarea:-Reason-for-rejection-(required).-Buttons:-Cancel:-Closes-the-dialog-without-rejecting.-Reject:-Confirms-the-rejection-with-the-provided-reason.-UI-Details:-The-dialog-should-have-a-warning-message-at-the-top.-The-text-area-for-the-reason-should-be-required-and-clearly-labeled.-The-buttons-should-be-aligned-to-the-right-side-of-the-dialog.import-{-Dialog,-DialogContent,-DialogHeader,-DialogTitle-}-from-"@/components/ui/dialog";-import-{-Textarea-}-from-"@/components/ui/textarea";-import-{-Button-}-from-"@/components/ui/button";-export-function-RejectDialog({-isOpen,-onClose,-selectedProviders-})-{-return-(-<Dialog-open={isOpen}-onOpenChange={onClose}>-<DialogContent>-<DialogHeader>-<DialogTitle>Reject-Service-Providers</DialogTitle>-</DialogHeader>-<div-className="space-y-4">-<p>Are-you-sure-you-want-to-reject-the-selected-service-providers?-This-action-cannot-be-undone.</p>-<Textarea-placeholder="Reason-for-rejection-(Required)"-required-/>-<div-className="flex-justify-end-space-x-2">-<Button-variant="outline"-onClick={onClose}>Cancel</Button>-<Button-variant="destructive">Reject</Button>-</div>-</div>-</DialogContent>-</Dialog>-);-}

Prompt
Component Preview

About

StyledDialog - A modal for rejecting service providers, featuring a required textarea for reasons, warning message, and aligned button. Download free code!

Share

Last updated 1 month ago