adding keyboard sound on search

cesarolvr · Feb 9, 2024 · bb1b661 · bb1b661
1 parent dd0c21c
commit bb1b661
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 26 deletions.
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -3,7 +3,7 @@ import classNames from "classnames";
 import Mousetrap from "mousetrap";
 
 // Components
-import { FiCoffee } from "@react-icons/all-files/fi/FiCoffee";
+import { FiThumbsDown } from "@react-icons/all-files/fi/FiThumbsDown";
 
 // Context
 import { State } from "../Layout";
@@ -21,6 +21,7 @@ const Modal = () => {
   const [list, setList] = React.useState(quickActionList);
   const [cursor, setCursor] = React.useState(0);
   const [typeListener, setTypeListener] = React.useState(null);
+  const [sound, setSound] = React.useState(new Audio(keytype));
 
   const { modalIsOpened, setModalIsOpened, setCopied } =
     React.useContext(State);
@@ -65,7 +66,7 @@ const Modal = () => {
 
       Mousetrap.bind("enter", (e) => {
         e.preventDefault();
-        if (cursor === 0) {
+        if (cursor === 0 && list.length > 1) {
           return copyLink(list[0].textToCopy);
         } else {
           const link = document.querySelector(`#tablist-${cursor} a`);
@@ -79,6 +80,9 @@ const Modal = () => {
 
   const onSearch = (e) => {
     const value = e?.target?.value;
+    sound.currentTime = 0;
+    sound.volume = 0.05;
+    sound.play();
     const newList = quickActionList.filter((item) =>
       item?.text?.includes(value)
     );
@@ -109,27 +113,6 @@ const Modal = () => {
     setCursor(cursor + 1);
   };
 
-  // React.useEffect(() => {
-  //   const sound = new Audio(keytype);
-  //   if (
-  //     modalIsOpened &&
-  //     document.activeElement.id === "shortcutid" &&
-  //     !typeListener
-  //   ) {
-  //     const listener = document.addEventListener("keydown", (e) => {
-  //       sound.currentTime = 0;
-  //       sound.volume = 0.2;
-  //       sound.play();
-  //     });
-
-  //     setTypeListener(listener);
-  //   }
-
-  //   if (!modalIsOpened) {
-  //     document.removeEventListener("keydown", typeListener);
-  //   }
-  // }, [modalIsOpened, typeListener]);
-
   return (
     <div
       className={classNames("modal", {
@@ -198,7 +181,7 @@ const Modal = () => {
             })
           ) : (
             <div className="empty">
-              <FiCoffee /> nothing here, try again
+              <FiThumbsDown /> nothing here, try again
             </div>
           )}
         </ul>

diff --git a/src/components/Modal/index.scss b/src/components/Modal/index.scss
@@ -108,7 +108,7 @@
 
     .empty {
       padding: 10px 20px 30px 20px;
-      color: #6f7785;
+      color: #808080;
       display: flex;
       align-items: center;
 

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -132,7 +132,7 @@ button,
   &.-toggle {
     padding: 0;
     font-size: 16px;
-    color: #6b717d;
+    color: #777777;
 
     &:hover {
       background: none;