Exam Dashboard - Copy this React, Tailwind Component to your project

Exam-Management-Dashboard-Design-Prompt:-Overview:-The-Exam-Management-Dashboard-should-be-clean-and-intuitive,-allowing-admins-to-quickly-filter,-search,-and-manage-exams.-The-layout-should-be-responsive,-adapting-seamlessly-from-mobile-to-desktop.-This-dashboard-will-display-a-list-of-exams,-with-essential-filters-and-action-buttons-for-efficient-administration.-Key-Components:-Header-Section:-Page-Title:-"Exam-Management"-in-bold,-larger-text,-centered-at-the-top-or-aligned-to-the-left.-Add-New-Exam-Button:-Button-with-a-plus-sign-icon-and-label,-“Add-New-Exam,”-located-on-the-top-right.-Style:-Prominent-color-(e.g.,-blue-or-green)-to-stand-out,-with-rounded-edges-and-a-slight-shadow.-Animation:-Subtle-hover-effect-to-indicate-interactivity.-Search-and-Filters-Section:-Search-Bar:-Centered-and-responsive-search-bar-with-a-placeholder-text,-“Search-exams-by-name-or-code...”.-Icon:-Magnifying-glass-icon-on-the-left-side-of-the-bar.-Style:-Rounded-corners,-subtle-shadow,-and-a-clear-input-field.-Animation:-Smooth-transition-on-focus.-Filter-Options:-Date-Range-Filter:-Start-and-end-date-fields-with-a-calendar-icon,-allowing-the-admin-to-specify-a-range.-Department-Filter:-Dropdown-menu-listing-various-departments-(e.g.,-Computer-Engineering,-Mechanical-Engineering).-Status-Filter:-Dropdown-to-filter-exams-by-status-(e.g.,-Scheduled,-Ongoing,-Completed,-Archived).-Sort-By:-Dropdown-with-sorting-options-(e.g.,-Date,-Department,-Alphabetical-Order).-Responsive-Layout:-Filters-stack-vertically-on-mobile-and-are-arranged-horizontally-on-desktop.-Exams-List-Section:-Table-Layout:-Display-exams-in-a-table-format-for-easy-scanning.-Columns:-Exam-Name:-Displayed-with-a-bold-font,-linking-to-the-exam-details.-Department:-Shows-the-associated-department-name.-Scheduled-Date:-Date-and-time-of-the-exam,-with-a-calendar-icon-next-to-it.-Status:-Badge-style-label-showing-the-exam’s-current-status-(color-coded:-blue-for-Scheduled,-green-for-Ongoing,-red-for-Completed,-gray-for-Archived).-Actions:-Column-for-admin-actions-like-edit,-delete,-and-view-details.-Responsive-Design:-On-mobile,-display-only-essential-columns-(e.g.,-Exam-Name,-Scheduled-Date)-with-a-“View-Details”-button-to-expand-each-entry.-Actions-and-Icons:-Edit-Exam:-Pencil-icon-to-edit-exam-details.-Delete-Exam:-Trash-icon-with-a-confirmation-dialog-for-deletion.-View-Results:-Eye-icon-to-view-results-of-completed-exams.-Schedule-Reminders:-Bell-icon-to-schedule-reminder-notifications-for-upcoming-exams.-View-Details-Button:-Button-or-link-that-opens-a-detailed-exam-view-modal-or-page.-Pagination:-Pagination-control-at-the-bottom-of-the-exams-list,-allowing-easy-navigation-through-pages-of-exams.-Style:-Rounded-buttons-with-clear-active-state-indication-and-“Next”-and-“Previous”-options.-Alternative:-Infinite-scroll-on-mobile-to-optimize-space-and-reduce-interaction-friction.-Styling-and-Color-Scheme:-Color-Palette:-Use-professional-colors-like-navy,-gray,-and-white,-with-accent-colors-for-action-buttons-(e.g.,-green-for-“Add-New-Exam”-and-red-for-“Delete”).-Icons:-Use-React-icons-for-all-action-buttons-to-enhance-visual-appeal-and-user-guidance.-Typography:-Clean-sans-serif-font-with-bold-headings-for-easy-readability;-smaller-font-sizes-on-mobile-for-optimized-layout.-Spacing-and-Padding:-Generous-spacing-around-each-component-to-prevent-clutter,-with-adjustable-padding-for-smaller-screens.