feat: add settings modal

src/components/Settings/SettingsModal.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence } from "framer-motion";
+import useModal from "hooks/useModal";
+import Modal from "../Modal/Modal";
+import * as Keys from "constants/keys";
+import { useHotkeys } from "react-hotkeys-hook";
+import { IoSettingsOutline } from "react-icons/io5";
+import LangSelector from "../LangSelector";
+
+export default function SettingsModal() {
+  const modal = useModal();
+  useHotkeys(Keys.CLOSE_SEARCH_KEY, modal.close, {
+    enabled: modal.isShowing,
+    enableOnFormTags: ["INPUT"],
+  });
+
+  return (
+    <>
+      <button onClick={modal.open} className="reset" title="Settings">
+        <IoSettingsOutline size={24} />
+      </button>
+      <AnimatePresence>
+        {modal.isShowing && (
+          <Modal title="Settings" close={modal.close}>
+            <LangSelector />
+            <p>about tab with all links related to MyLinks</p>
+            <button>disconnect</button>
+          </Modal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}