fix dropdown arrow and add activity field

Author: Waqibsk

src/assets/down.png

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "../styles/components/SortDropdown.css";
-import downArrow from "../assets/down.png";
-import upArrow from "../assets/up-arrow.png";
+import { FaChevronDown } from "react-icons/fa";
+import { FaChevronUp } from "react-icons/fa6";
 import { SortDropdownProps } from "../utils/types";
 const SortDropdown: React.FC<SortDropdownProps> = ({
   setSortField,
@@ -23,19 +23,17 @@ const SortDropdown: React.FC<SortDropdownProps> = ({
 
   return (
     <div className={`dropdown ${showMenu ? "show" : ""}`}>
-      <div className="sort-button">
-   <button disabled={window.innerWidth >= 760} onClick={toggleDropdown}>
+      <div className="sort-container">
+        <button disabled={window.innerWidth >= 1200} onClick={toggleDropdown} >
         Sort by:{" "}{sortField.charAt(0).toUpperCase()+sortField.slice(1)}
         </button>
-        <div className="sort-Arrow-container" onClick={(e) => {
-      e.stopPropagation(); 
-      toggleSort();
-    }}>
- <img src={sortType === "desc" ? downArrow : upArrow} className="sort-Arrow"   alt="▼" />
-     
+       
+        <div className="sort-Arrow-container" onClick={toggleSort}>
+          {sortType==="desc"?<FaChevronDown/>:<FaChevronUp/>}
         </div>
-   
-      </div>
+     </div>
+     
+    
     <div className={`dropdown-content ${showMenu ? "show" : ""}`}>
         <div className={`dropdown-item ${"name" === sortField ? "selected" : ""}`} onClick={() => handleSortField("name")}>
           {" "}
@@ -52,7 +50,12 @@ const SortDropdown: React.FC<SortDropdownProps> = ({
 
           Stars
         </div>
+        <div className={`dropdown-item ${"activity" === sortField ? "selected" : ""}`} onClick={() => handleSortField("activity")}>
+        
+         Activity 
+        </div>
 
+ 
       </div>
     </div>
   );

src/assets/up-arrow.png

@@ -6,8 +6,8 @@ import RepoData from '../data/repo_data.json';
 import SortDropdown from "../components/SortDropdown";
 const Projects = () => {
   const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[]
-  const [sortField, setSortField] = useState("name");
-  const [sortType,setSortType]=useState("asc")
+  const [sortField, setSortField] = useState("activity");
+  const [sortType,setSortType]=useState("desc")
   const languages = [...new Set(repoList.map(repo => repo.language))];
   const [selectedLanguage, setSelectedLanguage] = useState<string[]>([]);
   const [FilteredRepos, setFilteredRepos] = useState<REPO_DATA_TYPE[]>(repoList);
@@ -40,6 +40,13 @@ const Projects = () => {
   return sortType === "asc" ? cmp : -cmp;
 });
 
+    }
+    else if (sortField === "activity") {
+      if (sortType === "asc") {
+        result = result.reverse();
+      }
+      
+
 }    
 setFilteredRepos(result)
 

src/components/SortDropdown.tsx

@@ -10,7 +10,7 @@
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
   color: #000;
   padding: 1rem;
-  width: 400px;
+  width: 350px;
   text-align: left;
 }
 
@@ -29,7 +29,7 @@
   padding: 0.5rem 0;
   color: #333;
   text-align: left;
-  width: 100%;
+  height: 100%;
 }
 
 .gh-card-footer {

src/pages/Projects.tsx

@@ -11,39 +11,32 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   background-color: #393737;
   border-radius: 0 0 5px 5px;
 }
-.sort-button {
-  background-color: #2f2f2f;
-  color: #fcfcfc;
-  border: none;
-  padding: 8px 15px;
-  font-size: 14px;
+.sort-container {
   border-radius: 5px;
-   
   cursor: pointer;
-  width: 200px;
   transition: background 300ms, color 300ms, scale 300ms;
-
   display: flex;
-  justify-content: space-between;
- 
 }
-.sort-button button{
+.sort-container button{
   color: #fcfcfc;
   background-color: #2f2f2f;
-  width: 100%;
+  width: 200px;
+  border-radius: 5px 0 0 5px;
   text-align: left;
   border: none;
+  padding: 8px 15px  ;
+
 }
 .sort-Arrow-container{
   display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2f2f2f;
+  width: 30px;
+  border-radius: 0 5px 5px 0;
+  border-left: 1px solid #4e4d4d;
 }
 
-.sort-Arrow {
-  width: 15px;
-  
-  filter: brightness(0) invert(1);
-  color: white;
-}
 
 .dropdown-content {
   opacity: 0;
@@ -52,7 +45,7 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   border-radius: 0 0 5px 5px;
   background-color: #2f2f2f;
  color: #fcfcfc;
- width: 230px;
+ width: 200px;
 
   z-index: 1;
 }
@@ -83,8 +76,8 @@ for large screens toggle  on hover  */
   transform: translateY(0);
 }
 
-.dropdown:hover  .sort-button{
-   border-radius: 5px 5px 0 0;
+.dropdown:hover  .sort-container button{
+   border-radius: 5px 0 0 0;
 }
 
 /* 
@@ -94,8 +87,8 @@ for small screens toggling on click */
   transform: translateY(0);
 
 }
-.dropdown.show .sort-button{
-border-radius: 5px 5px 0 0 ;
+.dropdown.show .sort-container button{
+border-radius: 5px 0 0 0 ;
 
 }