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

I-want-you-to-desing-me-a-modal-for-assigning-care-giver.-it-will-open-if-i-click-assign-button-i-will-share-you-my-code-and-the-modal-will-have-a-global-search-using-caregiver-name,-address(address-is-object-and-have-line1-and-line2),-salary-or-phone-number-and-after-that-it-will-show-only-5-care-in-one-modal-we-will-gave-next-the-caregiver-will-be-shown-using-card-each-care-will-have-caregiverimage,name,phone-numbe-and-category-and-we-can-select-only-ine-care-giver-by-one-click-,-if-we-double-click-on-the-card-another-modal-will-show-care-giver-all-info-about-care-giver-like-name,-phone-number,-email,-password,-image,-category,-education,-experience,-nationality,-languages,-date_time_preference_to_work,-about,-gender,-available,-fees,-address,-rating,-is_booked,-dob,-date,-vetting_status,-status.-and-if-select-one-care-giver-with-one-click-and-modal-will-have-assign-and-cancel-and-if-we-clcik-assign-it-ask-if-we-are-sure-the-if-we-say-yes-it-will-be-assigned-my-code-is-/*-eslint-disable-no-unused-vars-*/-/*-eslint-disable-react/prop-types-*/-import-React,-{-useState,-useEffect-}-from-"react";-import-{-Dialog,-DialogContent,-FormControl,-TextField-}-from-"@mui/material";-const-AssignCaregiverModal-=-({-open,-careGivers,-onClose,-onAssign-})-=>-{-const-[selectedCaregiver,-setSelectedCaregiver]-=-useState("");-useEffect(()-=>-{-if-(careGivers.length->-0-&&-!selectedCaregiver)-{-//-Set-initial-caregiver-if-undefined-setSelectedCaregiver(careGivers[0].id);-}-},-[careGivers,-selectedCaregiver]);-const-handleAssign-=-()-=>-{-if-(selectedCaregiver)-{-onAssign(selectedCaregiver);-//-Call-the-assign-function-with-the-selected-caregiver-onClose();-//-Close-the-modal-}-else-{-console.warn("No-caregiver-selected");-}-};-return-(-<Dialog-open={open}-onClose={onClose}>-<DialogContent>-{careGivers.length->-0-?-(-<FormControl-fullWidth>-<TextField-label="Select-Caregiver"-select-value={selectedCaregiver}-onChange={(e)-=>-setSelectedCaregiver(e.target.value)}-SelectProps={{-native:-true-}}->-<option-value=""-disabled>-{/*-Select-caregiver-*/}-</option>-{careGivers.map((caregiver)-=>-(-<option-key={caregiver._id}-value={caregiver._id}>-{caregiver.name}-</option>-))}-</TextField>-</FormControl>-)-:-(-<p>No-caregivers-available</p>-//-Display-this-if-caregivers-not-loaded-)}-<button-onClick={handleAssign}>Assign-Caregiver</button>-</DialogContent>-</Dialog>-);-};-export-default-AssignCaregiverModal;