Fixed resources header and added Sort & Filter

website3.0/pages/ResourcesDetailsPage.js

@@ -152,6 +152,7 @@ function ResourcesDetailsPage() {
         >
           <FontAwesomeIcon icon={faGithub} />
         </a>
+        <h5>More Info</h5>
       </div>
       {/* Toast message for showing copy success/failure */}
       <div className="toast" id="toast">

website3.0/pages/ResourcesPage.js

@@ -8,44 +8,45 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 
 function ResourcesPage() {
-  // State variables to manage Data and Loadin State
+  // State variables to manage Data and Loading State
   const [originalData, setOriginalData] = useState([]);
   const [filteredData, setFilteredData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
- //to add body bg color 
+  // New state variables for sorting and filtering
+  const [sortOption, setSortOption] = useState('name');
+  const [filterOption, setFilterOption] = useState('all');
 
+   //to add body bg color 
 
- useEffect(() => {
-  console.log('sdsd')
-  function updateBackground(){
-
-    if(document.body.classList.contains('dark-mode')){
-      document.body.style.background = "#353535";
-
-    }else{
-
-      document.body.style.background = "linear-gradient(to bottom,#f5d471 2%,#ec904f 35%,#eb9a60 55%,#e99960 65%,#e89357 75%,#e99559 85%)  ";
-    }
-  }
-  const observer = new MutationObserver((mutationsList) => {
-    for (let mutation of mutationsList) {
-      if (mutation.attributeName === 'class') {
-        updateBackground();
+  useEffect(() => {
+    console.log('sdsd')
+    function updateBackground(){
+      if(document.body.classList.contains('dark-mode')){
+        document.body.style.background = "#353535";
+      } else {
+        document.body.style.background = "linear-gradient(to bottom,#f5d471 2%,#ec904f 35%,#eb9a60 55%,#e99960 65%,#e89357 75%,#e99559 85%)";
       }
     }
-  });
+    const observer = new MutationObserver((mutationsList) => {
+      for (let mutation of mutationsList) {
+        if (mutation.attributeName === 'class') {
+          updateBackground();
+        }
+      }
+    });
 
-  observer.observe(document.body, { attributes: true });
+    observer.observe(document.body, { attributes: true });
+
+    // Initial background update
+    updateBackground();
+    // Clean-up function to reset background color when component unmounts
+    return () => {
+      document.body.style.background = "";
+      observer.disconnect();
+    };
+  }, []);
 
-  // Initial background update
-  updateBackground();
-  // Clean-up function to reset background color when component unmounts
-  return () => {
-    document.body.style.background = "";
-    observer.disconnect();
-  };
-}, []);
   useEffect(() => {
     // Function to fetch repository data
     async function fetchRepository(url) {
@@ -159,17 +160,70 @@ function ResourcesPage() {
   const handleSearch = (event) => {
     // Get the search term from the input field, convert to lowercase
     const searchTerm = event.target.value.toLowerCase();
+    let results = originalData;
 
-    // If search term is empty, show all original data
-    if (searchTerm === "") {
-      setFilteredData(originalData);
-    } else {
-      // Filter original data based on whether item name includes the search term
-      const filteredResults = originalData.filter((item) =>
+    if (searchTerm !== "") {
+      results = results.filter((item) =>
         item.name.toLowerCase().includes(searchTerm)
       );
-      // Update filtered data state with filtered results
-      setFilteredData(filteredResults);
+    }
+
+    // Apply current filter
+    if (filterOption !== 'all') {
+      results = results.filter(item => {
+        const createdDate = new Date(item.created_at);
+        const now = new Date();
+        if (filterOption === 'lastWeek') {
+          return (now - createdDate) / (1000 * 60 * 60 * 24) <= 7;
+        } else if (filterOption === 'lastMonth') {
+          return (now - createdDate) / (1000 * 60 * 60 * 24) <= 30;
+        }
+        return true;
+      });
+    }
+
+    // Apply current sort
+    results.sort((a, b) => {
+      if (sortOption === 'name') {
+        return a.name.localeCompare(b.name);
+      } else if (sortOption === 'date') {
+        return new Date(b.created_at) - new Date(a.created_at);
+      }
+      return 0;
+    });
+
+    setFilteredData(results);
+  };
+
+  const handleSort = (option) => {
+    setSortOption(option);
+    const sorted = [...filteredData].sort((a, b) => {
+      if (option === 'name') {
+        return a.name.localeCompare(b.name);
+      } else if (option === 'date') {
+        return new Date(b.created_at) - new Date(a.created_at);
+      }
+      return 0;
+    });
+    setFilteredData(sorted);
+  };
+
+  const handleFilter = (option) => {
+    setFilterOption(option);
+    if (option === 'all') {
+      setFilteredData(originalData);
+    } else {
+      const filtered = originalData.filter(item => {
+        const createdDate = new Date(item.created_at);
+        const now = new Date();
+        if (option === 'lastWeek') {
+          return (now - createdDate) / (1000 * 60 * 60 * 24) <= 7;
+        } else if (option === 'lastMonth') {
+          return (now - createdDate) / (1000 * 60 * 60 * 24) <= 30;
+        }
+        return true;
+      });
+      setFilteredData(filtered);
     }
   };
 
@@ -236,6 +290,26 @@ function ResourcesPage() {
         </div>
       </div>
 
+      {/* Section: Sort & Filter */}
+
+      <div className="sort-filter-container">
+        <div className="sort-options">
+                <label>Sort by: </label>
+                <select value={sortOption} onChange={(e) => handleSort(e.target.value)}>
+                        <option value="name">Name</option>
+                        <option value="date">Date</option>
+                </select>
+        </div>
+        <div className="filter-options">
+                <label>Filter: </label>
+                <select value={filterOption} onChange={(e) => handleFilter(e.target.value)}>
+                        <option value="all">All</option>
+                        <option value="lastWeek">Last Week</option>
+                        <option value="lastMonth">Last Month</option>
+                </select>
+        </div>
+      </div>
+
       {/* Section: Main Container */}
 
       <div id="maincontainer">
@@ -259,4 +333,4 @@ function ResourcesPage() {
   );
 }
 
-export default ResourcesPage;
+export default ResourcesPage;

website3.0/stylesheets/resources.css

@@ -30,6 +30,7 @@ body {
   font-size: 24px;
   text-align: center;
   font-weight: 800;
+   margin-top: 130px;
 }
 .dark-mode header  ul li{
   color: white !important;
@@ -254,7 +255,41 @@ input {
   font-family: cursive;
   margin: 10px;
 }
+
+/* Styles for Sort & Filter */
+
+.sort-filter-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.sort-options, .filter-options {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sort-options select, .filter-options select {
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  background-color: white;
+  cursor: pointer;
+}
+
+.dark-mode .sort-options select, .dark-mode .filter-options select{
+  background-color: #2c2c2c;
+  color: #e0e0e0;
+  border-color: #555;
+}
+
+.dark-mode .sort-options label, .filter-options label {
+  color: #e0e0e0;
+}
 /* body{
   background: linear-gradient(180deg, #FDD86C 8.1%, #FF7D1F 100%) !important;
 
-} */
+} */
+

website3.0/stylesheets/resourcesdetails.css

@@ -11,7 +11,7 @@ body{
 #container {
   max-width: 1000px;
   margin: 0 auto;
-  margin-top: 100px;
+  margin-top: 150px;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
@@ -99,8 +99,8 @@ hr {
 }
 .repo-link {
   position: fixed;
-  bottom: 40px;
-  right: 20px;
+  top: 190px;
+  right: 90px;
   background-color: #333;
   color: #fff;
   padding: 15px;
@@ -111,10 +111,28 @@ hr {
   transition: background-color 0.3s ease;
 }
 
-.dark-mode .repo-link {
+#container h5{
   position: fixed;
-  bottom: 40px;
-  right: 20px;
+  top: 240px;
+  right: 75px;
+  font-size: 18px;
+}
+
+#container h5:hover{
+  color:#ff4500;
+  cursor: pointer;
+}
+
+.dark-mode #container h5{
+  color: #ff7d1f;
+}
+
+.dark-mode #container h5:hover{
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+.dark-mode .repo-link {
   background-color: #fff;
   color: #333;
 }