Word Press Settings Page - Copy this React, Tailwind Component to your project
Design-a-WordPress-settings-page-with-the-following-requirements:-Title:-Setting-Title:-"Customize-Author-URL-Structure"-Sections-&-Layout:-Header-Section:-A-section-at-the-top-of-the-page-should-include-a-title:-"Customize-Author-URL-Settings".-A-brief-description-of-what-this-setting-will-do:-"This-page-allows-you-to-change-the-author-URL-structure-from-'author'-to-a-custom-word,-such-as-'writer'-or-'contributor'."-URL-Structure-Section:-Label:-"Custom-Author-URL-Base"-An-input-field-where-users-can-type-in-their-custom-word-(e.g.,-writer,-contributor,-etc.)-to-replace-the-default-"author"-in-the-author-URLs.-A-note-under-the-input:-"Use-this-option-to-replace-the-default-author-URL-slug-with-your-desired-custom-word."-Roles-Display-Section:-Label:-"Author-Role-Display"-A-description-explaining-that-this-section-will-allow-users-to-display-the-author's-roles-(e.g.,-'Editor',-'Author',-'Subscriber')-on-the-author-archive-page.-An-option-to-toggle:-"Display-author-roles-next-to-their-name-on-the-author-archive-page."-Below-the-toggle,-list-all-available-WordPress-roles-in-a-multi-select-dropdown-or-checkboxes-(e.g.,-Administrator,-Editor,-Author,-Contributor,-Subscriber,-Custom-roles-if-any).-Preview-Section:-A-live-preview-area-below-the-settings,-showing-how-the-author-URL-would-look-based-on-the-entered-custom-word-(e.g.,-if-the-user-types-"writer",-it-should-display:-https://yourwebsite.com/writer/author-name/).-Display-the-author's-role(s)-next-to-their-name-in-the-preview-(e.g.,-"John-Doe---Writer,-Editor").-Save-and-Reset-Buttons:-A-"Save-Changes"-button-at-the-bottom.-A-"Reset-to-Defaults"-button-that-resets-the-settings-to-default-(i.e.,-author-URL-structure-to-"author"-and-roles-not-displayed).-Design-Specifications:-The-page-should-follow-a-modern-and-clean-UI-with-simple-inputs-and-toggles-for-ease-of-use.-Ensure-clear-labels-for-each-setting-option-with-concise-descriptions-and-tooltips-where-necessary.-The-preview-section-should-be-styled-to-look-similar-to-the-front-end-view-of-the-author-archive-page.-Use-colors-and-fonts-consistent-with-the-WordPress-admin-dashboard-theme-to-ensure-a-cohesive-look-and-feel.-Responsive-Design:-The-layout-should-be-fully-responsive,-adapting-smoothly-for-both-desktop-and-mobile-users.-For-mobile,-ensure-the-form-inputs-stack-properly,-and-the-preview-area-adjusts-to-the-screen-size.
