diff --git a/website3.0/pages/ResourcesDetailsPage.js b/website3.0/pages/ResourcesDetailsPage.js
index e3e70336..8437b009 100644
--- a/website3.0/pages/ResourcesDetailsPage.js
+++ b/website3.0/pages/ResourcesDetailsPage.js
@@ -152,6 +152,7 @@ function ResourcesDetailsPage() {
>
+ More Info
{/* Toast message for showing copy success/failure */}
diff --git a/website3.0/pages/ResourcesPage.js b/website3.0/pages/ResourcesPage.js
index a017ec47..1e3ba4da 100644
--- a/website3.0/pages/ResourcesPage.js
+++ b/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() {
+ {/* Section: Sort & Filter */}
+
+
+
+
+
+
+
+
+
+
+
@@ -259,4 +333,4 @@ function ResourcesPage() {
);
}
-export default ResourcesPage;
+export default ResourcesPage;
\ No newline at end of file
diff --git a/website3.0/stylesheets/resources.css b/website3.0/stylesheets/resources.css
index 6ff29d10..69532a1f 100644
--- a/website3.0/stylesheets/resources.css
+++ b/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;
-} */
\ No newline at end of file
+} */
+
diff --git a/website3.0/stylesheets/resourcesdetails.css b/website3.0/stylesheets/resourcesdetails.css
index 0103a303..b1be1e34 100644
--- a/website3.0/stylesheets/resourcesdetails.css
+++ b/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;
}