feat: Add OS detection hook and update search dialog (#1760)

open-sauced · Oct 11, 2023 · 585a2aa · 585a2aa
1 parent 6d80823
commit 585a2aa
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
@@ -12,6 +12,7 @@ import useLockBody from "lib/hooks/useLockBody";
 import { getAvatarByUsername } from "lib/utils/github";
 import { searchUsers } from "lib/hooks/search-users";
 import useDebounceTerm from "lib/hooks/useDebounceTerm";
+import useIsMacOS from "lib/hooks/useIsMacOS";
 
 const SearchDialog = () => {
   useLockBody();
@@ -23,6 +24,7 @@ const SearchDialog = () => {
   const setOpenSearch = store((state) => state.setOpenSearch);
   const debouncedSearchTerm = useDebounceTerm(searchTerm, 300);
   const [searchResult, setSearchResult] = useState<{ data: DbUserSearch[]; meta: {} }>();
+  const isMac = useIsMacOS();
 
   useEffect(() => {
     document.addEventListener("keydown", handleCloseSearch);
@@ -94,7 +96,7 @@ const SearchDialog = () => {
             onKeyDown={handleKeyboardCtrl}
           />
           <Text keyboard className="text-gray-600 !border-b !px-1">
-            ⌘K
+            {isMac ? "⌘K" : <span className="text-[12px] py-2 px-1">CTRL+K</span>}
           </Text>
         </div>
         <div className="w-full h-full flex items-center">
@@ -115,6 +117,7 @@ const SearchDialog = () => {
 
 const SearchDialogTrigger = () => {
   const setOpenSearch = store((state) => state.setOpenSearch);
+  const isMac = useIsMacOS();
 
   useEffect(() => {
     document.addEventListener("keydown", handleOpenSearch);
@@ -130,15 +133,15 @@ const SearchDialogTrigger = () => {
   return (
     <>
       <div
-        className="hidden sm:flex justify-between p-1 pl-3 h-fit w-52 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden"
+        className="hidden sm:flex justify-between p-1 pl-3 h-fit w-56 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden"
         onClick={() => setOpenSearch(true)}
       >
         <div className="flex items-center">
           <FaSearch className="text-light-slate-9" fontSize={16} />
           <Text className="pl-2 text-sm font-semibold text-light-slate-9">Search for users</Text>
         </div>
         <Text keyboard className="text-gray-600 !border-b !px-1">
-          ⌘K
+          {isMac ? "⌘K" : <span className="text-[12px] px-1 py-2">CTRL+K</span>}
         </Text>
       </div>
       <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>

diff --git a/lib/hooks/useIsMacOS.ts b/lib/hooks/useIsMacOS.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+const MACOS_USER_AGENT_PART = /Mac|Macintosh|MacIntel|Mac OS X/;
+
+function useIsMacOS(): boolean {
+  const [isMac, setIsMac] = useState<boolean>(false);
+
+  useEffect(() => {
+    const userAgentCheck = MACOS_USER_AGENT_PART.test(window.navigator.userAgent);
+    setIsMac(userAgentCheck);
+  }, []);
+
+  return isMac;
+}
+
+export default useIsMacOS;