Added custom selector

Author: technoph1le

src/components/LanguageSelector.tsx

@@ -1,19 +1,39 @@
+import React, { useState, useRef } from "react";
 import { useAppContext } from "../contexts/AppContext";
 import { useLanguages } from "../hooks/useLanguages";
+import { LanguageType } from "../types";
+
+// Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
 
 const LanguageSelector = () => {
-  const { language, setLanguage, setCategory } = useAppContext();
+  const { language, setLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
-  const handleLanguageChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    const selectedLanguage = fetchedLanguages.find(
-      (language) => language.lang === event.target.value
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] =
+    useState<LanguageType>(language);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleLanguageChange = (langObj: LanguageType) => {
+    const selected = fetchedLanguages.find(
+      (item) => item.lang === langObj.lang
     );
-    if (selectedLanguage) {
-      setLanguage(selectedLanguage);
-      setCategory("");
+    if (selected) {
+      setSelectedLanguage(selected);
+      setLanguage(selected);
+      setIsDropdownOpen(false);
+    }
+  };
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen((prev) => !prev);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, lang: LanguageType) => {
+    if (event.key === "Enter") {
+      handleLanguageChange(lang);
+    } else if (event.key === "Escape") {
+      setIsDropdownOpen(false);
     }
   };
 
@@ -26,18 +46,53 @@ const LanguageSelector = () => {
   }
 
   return (
-    <select
-      id="languages"
-      className="language-selector"
-      onChange={handleLanguageChange}
-      value={language?.lang || "CSS"}
+    <div
+      className={`selector ${isDropdownOpen ? "selector--open" : ""}`}
+      ref={dropdownRef}
     >
-      {fetchedLanguages.map((language, idx) => (
-        <option key={idx} value={language.lang}>
-          {language.lang}
-        </option>
-      ))}
-    </select>
+      <button
+        className="selector__button"
+        aria-label="select button"
+        aria-haspopup="listbox"
+        aria-expanded={isDropdownOpen}
+        onClick={toggleDropdown}
+      >
+        <div className="selector__value">
+          <img src={selectedLanguage.icon} alt="" />
+          <span>{selectedLanguage.lang || "Select a language"}</span>
+        </div>
+        <span className="selector__arrow"></span>
+      </button>
+      {isDropdownOpen && (
+        <ul className="selector__dropdown" role="listbox">
+          {fetchedLanguages.map((lang) => (
+            <li
+              key={lang.lang}
+              role="option"
+              tabIndex={0}
+              onClick={() => handleLanguageChange(lang)}
+              onKeyDown={(e) => handleKeyDown(e, lang)}
+              className={`selector__item ${
+                selectedLanguage.lang === lang.lang ? "selected" : ""
+              }`}
+            >
+              <input
+                type="radio"
+                id={`selector-for-${lang.lang}`}
+                name="language"
+                value={lang.lang}
+                checked={selectedLanguage === lang}
+                readOnly
+              />
+              <label htmlFor={`selector-for-${lang.lang}`}>
+                <img src={lang.icon} alt="" />
+                <span>{lang.lang}</span>
+              </label>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
   );
 };
 

src/contexts/AppContext.tsx

@@ -3,8 +3,8 @@ import { AppState, LanguageType, SnippetType } from "../types";
 
 // tokens
 const defaultLanguage: LanguageType = {
-  lang: "CSS",
-  icon: "/icons/css.svg",
+  lang: "JavaScript",
+  icon: "/icons/javascript.svg",
 };
 
 // TODO: add custom loading and error handling

src/layouts/Banner.tsx

@@ -5,8 +5,11 @@ const Banner = () => {
         Made to save your <span className="text-highlight">time.</span>
       </h1>
       <p>
-        Find the necessary snippet in seconds, across multiple languages. Just
-        search and copy!
+        Find code snippets in seconds, across multiple languages. Just{" "}
+        <s>
+          <abbr title="Under construction :)">search</abbr>
+        </s>{" "}
+        and copy!
       </p>
     </div>
   );

src/layouts/Footer.tsx

@@ -9,30 +9,20 @@ const Footer = () => {
             <a href="/" className="styled-link">
               QuickSnip
             </a>{" "}
-            is your go-to collection of handy code snippets, making repetitive
-            tasks easier and faster for developers across different programming
-            languages.
+            is an open-source project that categorizes handy code snippets
+            across various programming languages.
           </p>
           <p>
-            Built by{" "}
-            <a
-              href="https://github.com/dostonnabotov"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="styled-link"
-            >
-              Technophile
-            </a>
-            , and powered by awesome{" "}
+            Built with love and powered by an{" "}
             <a
               href="https://github.com/dostonnabotov/quicksnip"
               target="_blank"
               rel="noopener noreferrer"
               className="styled-link"
             >
-              community
+              awesome community
             </a>
-            .
+            . 🚀
           </p>
         </div>
         <nav className="footer__nav">

src/styles/main.css

@@ -136,6 +136,11 @@ ol:where([role="list"]) {
   margin: 0;
 }
 
+abbr {
+  text-decoration: none;
+  cursor: help;
+}
+
 /*------------------------------------*\
   #UTILS
 \*------------------------------------*/
@@ -195,6 +200,7 @@ ol:where([role="list"]) {
 /*------------------------------------*\
   #COMPONENTS
 \*------------------------------------*/
+/* button */
 .button {
   display: inline-flex;
   min-height: 3rem;
@@ -208,6 +214,11 @@ ol:where([role="list"]) {
   cursor: pointer;
   line-height: 1.1;
   text-decoration: none;
+  transition: transform 200ms ease;
+}
+
+.button:is(:hover, :focus-visible) {
+  border-color: var(--clr-accent);
 }
 
 .button--icon {
@@ -220,6 +231,7 @@ ol:where([role="list"]) {
   padding: 0.5em;
 }
 
+/* search field */
 .search-field {
   display: inline-flex;
   align-items: center;
@@ -228,6 +240,10 @@ ol:where([role="list"]) {
   border: 1px solid var(--border-color);
   border-radius: var(--br-md);
   padding: 0.75em 1.125em;
+
+  &:is(:hover, :focus-within) {
+    border-color: var(--clr-accent);
+  }
 }
 
 .search-field > input {
@@ -239,6 +255,112 @@ ol:where([role="list"]) {
   }
 }
 
+/* custom selector */
+.selector {
+  position: relative;
+  width: 100%;
+}
+
+.selector__button {
+  width: 100%;
+  font-size: var(--fs-500);
+  font-weight: var(--fw-bold);
+  padding: 0.5em 1em;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+  cursor: pointer;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.selector__value {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.selector__value img {
+  width: 30px;
+}
+
+.selector__arrow {
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid var(--text-primary);
+  transition: transform 100ms ease;
+}
+
+.selector--open .selector__arrow {
+  transform: rotate(180deg);
+}
+
+.selector__dropdown {
+  display: grid;
+  gap: 0.25rem;
+
+  position: absolute;
+  width: 100%;
+  max-height: 15rem;
+  overflow-y: auto;
+
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  font-size: var(--fs-400);
+  list-style: none;
+
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.selector__dropdown:focus-within {
+  border-color: var(--clr-accent);
+}
+
+.selector__item {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  border-radius: var(--br-md);
+}
+
+.selector__item label {
+  width: 100%;
+  padding: 0.25em 0.75em;
+  cursor: pointer;
+  border-radius: var(--br-md);
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  color: var(--text-primary);
+}
+
+.selector__item label img {
+  width: 35px;
+}
+
+.selector__item:hover {
+  background-image: var(--gradient-secondary);
+}
+
+.selector__item.selected label {
+  background-color: var(--clr-accent);
+  color: var(--text-dark);
+  font-weight: var(--fw-bold);
+}
+
+.selector__item input[type="radio"] {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+}
+
 .logo {
   display: inline-flex;
   gap: 0.25em;
@@ -294,18 +416,20 @@ ol:where([role="list"]) {
 /*------------------------------------*\
   #SIDEBAR
 \*------------------------------------*/
-.language-selector {
+/* .language-selector {
   background-color: transparent;
   cursor: pointer;
-  border: 0;
-  /* padding-block: 0.5em; */
+  border: 1px solid transparent;
+  padding-block: 0.5em;
   font-weight: var(--fw-bold);
   font-size: var(--fs-600);
-}
+  border-radius: var(--br-md);
+  appearance: none; /* Removes default arrow */
 
-.language-selector option {
-  font-size: var(--fs-400);
-}
+/* &:focus-within {
+    border-color: var(--clr-accent);
+  } 
+} */
 
 .categories {
   display: grid;