Student Results Page - Copy this React, Tailwind Component to your project

Design-a-professional,-fully-responsive-page-to-display-student-results-for-a-question-paper,-with-an-intuitive-UI/UX-that-works-seamlessly-across-mobile,-tablet,-and-desktop-devices.-The-design-should-focus-on-clarity,-ease-of-use,-and-professionalism,-with-a-purple-indigo-color-theme-for-consistency.-1.-Page-Layout-&-Design:-Title-Section:-Display-the-title-of-the-question-paper-in-a-large,-bold-font-at-the-top-of-the-page,-ensuring-it-stands-out.-Beneath-the-title,-display-the-start-time-and-end-time-in-a-clear-and-readable-format,-using-an-icon-like-MdAccessTime-for-time-and-MdCalendarToday-for-date.-Display-isQuiz-and-isFastQuiz-in-a-compact,-well-placed-section-with-relevant-icons-such-as-MdCheckCircle-for-isQuiz-(indicating-it’s-a-quiz)-and-MdTimer-for-isFastQuiz-(indicating-it’s-a-fast-paced-quiz).-2.-Student-Results-Table:-Display-a-table-with-the-following-columns:-Student-Name:-Show-the-student's-name-with-a-clickable-link,-which-can-lead-to-a-more-detailed-profile-or-results-page.-Use-an-icon-like-MdPerson-next-to-the-name-for-visual-appeal.-Class:-Indicate-the-student's-class-(e.g.,-10th,-12th).-Use-a-small-MdSchool-icon-to-represent-class.-Division:-Display-the-division-(A,-B,-C,-etc.),-using-a-subtle-MdGroup-icon-for-a-visual-indicator.-Total-Points:-Show-the-total-points-the-student-could-earn-in-the-exam,-using-a-numeric-format-and-the-MdStar-icon-to-indicate-points.-Attempted-Questions:-Display-the-number-of-questions-attempted-by-the-student-with-the-MdAssignment-icon,-making-it-clear-which-questions-were-answered.-Actions:-Provide-action-buttons-with-icons-such-as-MdInfo-for-viewing-detailed-results-or-MdDownload-for-downloading-the-results.-3.-Table-Features:-Pagination:-Implement-pagination-in-the-table-to-allow-the-admin-to-navigate-through-multiple-pages-of-student-results.-Include-MdNavigateNext-and-MdNavigateBefore-icons-for-next-and-previous-buttons.-Sorting-&-Filtering:-Allow-the-table-to-be-sorted-by-each-column-(e.g.,-by-name,-class,-points,-etc.),-with-sortable-headers-and-the-use-of-small-icons-for-ascending-(MdArrowUpward)-and-descending-(MdArrowDownward)-order.-Hover-&-Click-Effects:-Add-subtle-hover-effects-to-table-rows-to-highlight-them-and-improve-user-interaction.-When-clicking-on-a-student's-row,-provide-more-detailed-information-(like-individual-answers-or-time-taken)-in-a-modal-or-expandable-section.-4.-Student-Performance-Visualization:-Bar/Line-Graph:-Below-the-table,-provide-a-small-chart-or-graph-(like-a-bar-chart-or-line-graph)-that-displays-the-student’s-performance-over-time-or-based-on-different-sections-of-the-exam.-Icons-like-MdBarChart-and-MdShowChart-can-represent-these-graph-based-elements.-Use-color-coding-(e.g.,-green-for-correct-answers,-red-for-incorrect-answers)-to-indicate-the-performance-visually.-5.-Search-&-Filter-Functionality:-Include-a-search-bar-at-the-top-of-the-results-section-for-quick-searching-of-student-names-or-IDs,-using-the-MdSearch-icon.-Add-filter-options-such-as-class,-division,-or-date-of-the-exam-to-make-it-easier-for-the-admin-to-refine-the-results.-Use-filters-like-MdFilterList-for-dropdown-menus-or-selection-boxes.-6.-Responsive-Design:-Mobile-View:-For-smaller-screens,-display-the-table-in-a-stacked-format,-where-each-student’s-data-(name,-class,-points,-etc.)-is-shown-as-a-card-or-row-with-clearly-defined-sections.-Use-accordion-style-collapsible-sections-to-show-additional-details,-with-icons-like-MdExpandMore-and-MdExpandLess-for-expansion.-Tablet-View:-For-tablet-screens,-adjust-the-layout-to-display-the-table-in-a-slightly-more-compact-manner,-but-still-allow-for-easy-reading.-Use-flexbox/grid-for-better-alignment-of-data.-Ensure-the-table-does-not-require-horizontal-scrolling.-Desktop-View:-For-desktop,-maintain-the-table-format-with-full-columns-visible.-Provide-extra-space-between-columns-for-better-readability-and-an-organized-look.-7.-User-Interaction:-Hover-Effects:-Implement-subtle-hover-effects-on-the-table-rows-to-highlight-when-a-user-hovers-over-a-student's-result.-This-can-include-a-background-color-change-or-a-border-around-the-row.-Action-Buttons:-Use-clear,-actionable-buttons-for-each-student-in-the-Actions-column.-Icons-like-MdVisibility-(view),-MdEdit-(edit),-and-MdDownload-(download)-should-be-used-for-better-visual-indication-of-the-actions-available-for-the-admin.-8.-Color-&-Typography:-Use-a-purple-indigo-color-scheme-for-consistency.-Use-lighter-shades-for-background-and-darker-shades-for-text,-with-highlights-and-icons-in-contrasting-colors-to-draw-attention-to-key-areas.-For-typography,-use-modern-sans-serif-fonts-like-Roboto-or-Open-Sans,-ensuring-that-the-text-is-legible-on-all-screen-sizes.-Make-sure-there-is-good-contrast-between-text-and-background-for-accessibility.-9.-Icons-to-Use:-MdAccessTime-for-time-related-information.-MdCalendarToday-for-exam-dates.-MdCheckCircle-for-quiz-status.-MdTimer-for-fast-quiz-indication.-MdPerson-for-student-names.-MdSchool-for-class-details.-MdGroup-for-division-information.-MdStar-for-total-points.-MdAssignment-for-attempted-questions.-MdInfo-for-detailed-views.-MdDownload-for-download-actions.-MdSearch-for-search-functionality.-MdFilterList-for-filtering-options.-MdBarChart-and-MdShowChart-for-performance-charts.-MdNavigateNext-and-MdNavigateBefore-for-pagination.-10.-Additional-Considerations:-The-overall-layout-should-be-flexible-with-the-use-of-grid-systems-to-ensure-content-adjusts-for-different-screen-sizes.-Ensure-consistent-spacing-between-table-rows,-headers,-and-sections-to-prevent-clutter-and-enhance-the-user-experience.-For-accessibility,-ensure-keyboard-navigation-for-all-interactive-elements-like-buttons-and-links,-as-well-as-screen-reader-support-for-important-information.