Create Faculty Admin - Copy this React, Tailwind Component to your project
Detailed-Prompt-for-a-Professional,-Fully-Responsive-"Create-New-Faculty/Admin"-Web-Page-Design-Page-Layout-and-Features:-Page-Title-and-Description:-Add-a-bold,-professional-page-title:-"Create-New-Faculty/Admin"-with-a-large-font-size.-Display-a-brief-description:-"Add-a-new-faculty-or-admin-member-by-filling-in-the-details-below.-Select-the-appropriate-roles-to-assign-permissions."-Use-an-icon-such-as-MdAdminPanelSettings-or-MdPersonAddAlt1-for-visual-emphasis-next-to-the-title.-Form-Container:-Use-a-card-style-layout:-Center-the-form-in-a-container-with-a-shadow-and-rounded-corners-(shadow-lg-rounded-lg-bg-white-p-6).-Background:-Subtle-gradient-(from-blue-600-to-indigo-500)-for-the-entire-page.-Ensure-the-form-container-has-a-maximum-width-for-readability-on-desktops-while-taking-up-full-width-on-mobile.-Form-Fields:-Include-all-fields-from-the-schema-with-appropriate-labels-and-placeholders:-Name-(Full-Name)-Username-(Unique-Identifier)-Email-(Valid-Email-Address)-Phone-Number-(With-country-code,-e.g.,-+91)-Password-(With-a-show/hide-toggle)-Subject-(Optional-field-with-placeholder-"Enter-Subject-Specialization")-Role-Assignment:-Add-toggle-switches-or-checkboxes-for-roles:-Is-Teacher-(MdSchool)-Is-HOD-(MdSupervisorAccount)-Is-TNP-(MdBusinessCenter)-Interactive-Features:-Use-React-Icons-for-each-field:-MdPerson,-MdEmail,-MdPhone,-MdLock,-MdSubject,-MdToggleOn.-Add-tooltips-(MdHelpOutline)-for-fields-that-require-explanations-(e.g.,-Role-Assignment).-Action-Buttons:-Submit-Button:-Primary-button-with-a-gradient-(from-green-400-to-green-600)-and-an-icon-(MdCheckCircleOutline).-Text:-"Create-Faculty/Admin".-Reset-Button:-Secondary-button-with-a-gray-background-(bg-gray-200-hover:bg-gray-300)-and-an-icon-(MdRefresh).-Text:-"Reset-Form".-Include-hover-animations-with-slight-scaling-and-color-transitions.-Role-Selection-Design:-Display-roles-(isTeacher,-isHod,-isTnp)-as-toggle-buttons-(MdToggleOn/MdToggleOff),-styled-with-green-for-active-and-gray-for-inactive.-Add-a-summary-tooltip-next-to-the-toggles-explaining-their-responsibilities.-Confirmation-and-Feedback:-Show-a-success-alert/modal-on-form-submission:-"Faculty/Admin-Added-Successfully!"-Use-an-icon-like-MdDoneAll-for-confirmation.-Provide-options-to-"Add-Another-Faculty/Admin"-or-"Go-to-Faculty-List".-Show-validation-errors-inline-below-each-field-or-as-a-toast-notification-(MdErrorOutline).-Responsive-Design:-Mobile/Tablet:-Stack-fields-vertically-with-sufficient-spacing.-Reduce-padding-and-margins-while-keeping-readability.-Desktop:-Use-a-two-column-layout-for-fields-like-Name,-Username,-Email,-and-Phone.-Roles-and-Subject-fields-can-span-the-full-width-in-a-new-row.-Ensure-a-fluid-layout-with-proper-margins-for-all-devices.-Accessibility:-Add-proper-ARIA-labels-for-all-input-fields-and-buttons.-Ensure-focus-states-are-prominent-and-consistent-across-devices.-Animations-and-Interactions:-Animate-the-form-container-with-a-fade-in-effect.-Add-subtle-input-focus-animations-like-border-glow-or-underline-expansion.-Use-smooth-scrolling-to-the-first-error-field-on-validation-failure.-Navigation-Breadcrumbs:-Add-breadcrumbs-at-the-top-for-easy-navigation:-Example:-"Home->-Faculty-Management->-Create-Faculty/Admin"-Use-icons-like-MdHome,-MdGroup,-MdAdminPanelSettings.-Theme-Toggle:-Include-a-dark-mode-toggle-(MdDarkMode/MdLightMode)-for-the-form.-React-Icons-Suggested:-MdPerson,-MdEmail,-MdPhone,-MdLock,-MdSchool,-MdSupervisorAccount,-MdBusinessCenter,-MdSubject,-MdToggleOn,-MdToggleOff,-MdCheckCircleOutline,-MdRefresh,-MdDoneAll,-MdErrorOutline,-MdHome,-MdGroup,-MdAdminPanelSettings.-This-prompt-ensures-a-professional-and-user-friendly-design-for-creating-new-faculty/admin-members-with-all-fields,-role-selection,-and-feedback-mechanisms-fully-responsive-for-all-devices.
