feat: that dropdown was annoying me

Author: harshkhandeparkar

src/components/SortDropdown.tsx

@@ -1,61 +1,36 @@
-import React, { useState } from "react";
 import "../styles/components/SortDropdown.css";
-import { FaChevronDown } from "react-icons/fa";
-import { FaChevronUp } from "react-icons/fa6";
 import { SortDropdownProps } from "../utils/types";
+import { FaArrowDownShortWide, FaArrowDownWideShort } from "react-icons/fa6";
 const SortDropdown: React.FC<SortDropdownProps> = ({
   setSortField,
   setSortType,
   sortField,
   sortType,
 }) => {
-  const [showMenu, setShowMenu] = useState(false);
-
   const toggleSort = () => {
     setSortType(sortType === "desc" ? "asc" : "desc");
   }
-  const toggleDropdown = () => {
-    setShowMenu(!showMenu);
-  };
-  const handleSortField = (field: string) => {
-    setSortField(field);
-  };
-  
+
+  const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    e.preventDefault();
+    setSortField(e.target.value);
+  }
+
   return (
-    <div className={`dropdown ${showMenu ? "show" : ""}`}>
+    <div className="dropdown">
       <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={toggleSort}>
-          {sortType==="desc"?<FaChevronDown/>:<FaChevronUp/>}
-        </div>
-     </div>
-     
-    
-    <div className={`dropdown-content ${showMenu ? "show" : "hidden"}`}>
-        <div className={`dropdown-item ${"name" === sortField ? "selected" : ""}`} onClick={() => handleSortField("name")}>
-          {" "}
-       
-          Name
-        </div>
-        <div className={`dropdown-item ${"forks" === sortField ? "selected" : ""}`} onClick={() => handleSortField("forks")}>
-          <span
-           
-          ></span>
-          Forks
-        </div>
-        <div className={`dropdown-item ${"stars" === sortField ? "selected" : ""}`} onClick={() => handleSortField("stars")}>
-        
-          Stars
-        </div>
-        <div className={`dropdown-item ${"activity" === sortField ? "selected" : ""}`} onClick={() => handleSortField("activity")}>
-        
-         Activity 
-        </div>
-     
- 
+        <label htmlFor="sort-select">Sort by:</label>
+
+        <select className="sort-select" onChange={handleSortChange} value={sortField}>
+          <option value="name">Name</option>
+          <option value="forks">Forks</option>
+          <option value="stars">Stars</option>
+          <option value="activity">Activity</option>
+        </select>
+      </div>
+
+      <div className="sort-Arrow-container" onClick={toggleSort}>
+        {sortType === "asc" ? <><FaArrowDownShortWide /> Ascending</> : <><FaArrowDownWideShort /> Descending</>}
       </div>
     </div>
   );

src/pages/Projects.tsx

@@ -7,15 +7,15 @@ import SortDropdown from "../components/SortDropdown";
 import PaginatedCardGrid from "../sections/CardGrid";
 const Projects = () => {
   const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[]
-  const [sortField, setSortField] = useState("activity");
+  const [sortField, setSortField] = useState("stars");
   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);
 
 
   //sorting based on STARS ,FORKS , NAME
-  // and Also filtered by Language 
+  // and Also filtered by Language
   useEffect(() => {
     let result = repoList.filter((repo) =>
       selectedLanguage.length === 0 || selectedLanguage.includes(repo.language)
@@ -98,7 +98,6 @@ const Projects = () => {
           sortType={sortType}
         />
 
-
       </div>
       <PaginatedCardGrid repos={FilteredRepos} displayMode="all" />
     </div>

src/styles/components/SortDropdown.css

@@ -1,106 +1,42 @@
 .dropdown {
-  position: relative;
-  display: inline-block;
-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  width: 250px;
-  padding: 10px;
+  display: flex;
+  gap: 0.5rem;
+  height: fit-content;
 }
 
-.selected {
-  background-color: #393737;
-  border-radius: 0 0 5px 5px;
-}
 .sort-container {
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background 300ms, color 300ms, scale 300ms;
   display: flex;
+  gap: 5px;
 }
-.sort-container button{
-  color: #fcfcfc;
-  background-color: #2f2f2f;
-  width: 200px;
-  border-radius: 5px 0 0 5px;
-  text-align: left;
-  border: none;
-  padding: 8px 15px  ;
 
+.sort-container label {
+  align-content: center;
 }
-.sort-Arrow-container{
+
+.sort-Arrow-container {
   display: flex;
+  gap: 5px;
+  padding: 0 0.5rem;
+
   justify-content: center;
   align-items: center;
   background-color: #2f2f2f;
-  width: 30px;
-  border-radius: 0 5px 5px 0;
-  border-left: 1px solid #4e4d4d;
-}
-
+  border-radius: 5px;
 
-.dropdown-content {
-  opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  position: absolute;
-  border-radius: 0 0 5px 5px;
-  background-color: #2f2f2f;
- color: #fcfcfc;
- width: 200px;
- 
-  z-index: 1;
+  user-select: none;
 }
 
-.dropdown-content div {
-  padding: 10px 20px;
+.sort-Arrow-container:hover {
   cursor: pointer;
-  display: flex;
-
-  align-items: center;
-}
-
-.dropdown-item {
-  text-align: center;
- font-size: small;
-  transition: background 300ms, color 300ms, scale 300ms;
-}
-.dropdown-item:hover {
-  background-color: #393737;
- border-radius: 0 0 5px 5px;
 }
 
+.sort-select {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  border-radius: 5px;
+  background-color: #2f2f2f;
+  color: #fcfcfc;
+  width: 200px;
+  border: none;
 
-/* 
-for large screens toggle  on hover  */
-.dropdown:hover .dropdown-content {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.dropdown:hover  .sort-container button{
-   border-radius: 5px 0 0 0;
-}
-
-/* 
-for small screens toggling on click */
-.dropdown-content.show {
-  opacity: 1;
-  transform: translateY(0);
- 
-}
-.dropdown.show .sort-container button{
-border-radius: 5px 0 0 0 ;
- 
-}
-
-
-
-
-
-
-
-@media (max-width: 1200px) {
-  .hidden {
-    display: none;
-  }
-
-}
+  padding: 8px 15px;
+}

src/styles/pages/Projects.css

@@ -2,22 +2,22 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin-bottom: 20px;
-  padding: 10px;
-  /* background: #f5f5f5; */
-  border-radius: 10px;
   overflow-x: auto;
   white-space: nowrap;
 }
-.filter-container{
 
-display: flex;
-justify-content: space-between;
+.filter-container {
+  display: flex;
+  width: 100%;
+  gap: 0.8rem;
+  padding: 10px 0;
+  flex-direction: column;
 }
+
 .filter-button {
   border: none;
   padding: 8px 15px;
-  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+  /* box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); */
   font-size: 14px;
   cursor: pointer;
   background-color: #2f2f2f;
@@ -35,8 +35,8 @@ justify-content: space-between;
   font-weight: bold;
 }
 
-@media (max-width:1024px){
-  .filter-container{
+@media (max-width:1024px) {
+  .filter-container {
     flex-direction: column;
   }
 }