User Results - Copy this React, Tailwind Component to your project
"Design-a-professional-and-fully-responsive-webpage-to-display-a-user's-results-with-a-clean-and-functional-interface.-The-webpage-should-prominently-feature-a-table-with-the-following-columns:-Title,-Points,-Paper-Key,-Time,-and-Actions.-Use-a-modern-color-theme-based-on-shades-of-purple-and-indigo-for-consistency-and-aesthetics.-Key-Features:-Table-Design:-Display-a-maximum-of-10-entries-per-page.-Include-a-'Next'-and-'Previous'-button-for-navigation-to-view-additional-pages-of-results.-Add-a-'Show-All'-button-that-displays-all-results-on-the-same-page.-Ensure-the-table-header-is-sticky-for-better-visibility-during-scrolling.-Filtering-System:-Include-a-toggle-filter-to-view-results-by-'Old'-or-'Latest'.-Allow-dynamic-sorting-by-clicking-on-table-headers-for-columns-like-Points-or-Time.-Search-Bar:-Place-a-responsive-search-bar-above-the-table-to-search-results-dynamically-by-Title-or-Paper-Key.-Use-the-MdSearch-icon-from-react-icons/md-for-the-search-bar.-Actions-Column:-Include-a-'View-Result'-button-with-a-hover-effect-to-open-detailed-information-about-the-specific-result.-Use-MdVisibility-and-MdFileDownload-icons-for-"View"-and-"Download"-actions-respectively.-Responsiveness:-Design-for-all-devices:-On-desktop,-display-the-full-table-layout.-On-tablet,-adjust-spacing-and-padding-for-a-clean-layout-without-horizontal-scrolling.-On-mobile,-use-a-collapsible-or-stacked-table-design-with-key-details-visible-at-a-glance-and-a-button-to-expand-for-more-information.-Styling:-Use-rounded-corners-and-subtle-shadows-for-table-rows-to-enhance-the-modern-look.-Apply-hover-effects-with-gradient-transitions-from-indigo-to-purple-for-interactive-elements-like-buttons.-Highlight-the-selected-row-with-a-light-purple-background-for-better-focus.-Icons-and-Buttons:-Use-MdFilterList-for-the-filter-dropdown.-Use-MdArrowForward-and-MdArrowBack-for-navigation-buttons.-Incorporate-smooth-animations-for-interactions,-such-as-row-expansion-and-button-clicks.-User-Feedback:-Show-a-loader-animation-(e.g.,-spinner)-during-data-loading,-using-the-MdAutorenew-icon.-Display-an-empty-state-message-with-an-illustration-if-no-results-are-found,-using-MdInbox-for-the-icon.-Functional-Requirements:-All-interactive-elements-should-be-keyboard-and-screen-reader-accessible.-Ensure-smooth-performance-with-pagination-and-filtering-powered-by-JavaScript-or-React-state-management.-Use-placeholders-and-tooltips-for-icons-and-actions-to-improve-usability.-The-design-should-provide-an-intuitive-and-engaging-user-experience-while-maintaining-a-professional-look."
