diff --git a/components/search-command.tsx b/components/search-command.tsx index ce75ab2..ff621de 100644 --- a/components/search-command.tsx +++ b/components/search-command.tsx @@ -2,7 +2,7 @@ import { Icon } from "@iconify/react"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo } from "react"; +import { useEffect } from "react"; import { CommandPalette, CommandPaletteContent, @@ -18,6 +18,7 @@ import { COMMAND_PALETTE_GROUPS, type CommandPaletteItem as PaletteItem, } from "@/lib/command-palette-links"; +import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label"; type SearchCommandProps = { open: boolean; @@ -26,12 +27,7 @@ type SearchCommandProps = { export function SearchCommand({ open, onOpenChange }: SearchCommandProps) { const router = useRouter(); - - const shortcut = useMemo(() => { - if (typeof window === "undefined") return "Ctrl K"; - const isMac = /(Mac|iPhone|iPad)/i.test(window.navigator.platform); - return isMac ? "Cmd K" : "Ctrl K"; - }, []); + const shortcut = useKeyboardShortcutLabel(); useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { @@ -59,7 +55,7 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) { return ( - + { - if (typeof window === "undefined") return "Ctrl K"; - const isMac = /(Mac|iPhone|iPad)/i.test(window.navigator.platform); - return isMac ? "Cmd K" : "Ctrl K"; - }, []); + const shortcut = useKeyboardShortcutLabel(); const isActiveLink = (href: string) => { if (href === "/") return pathname === "/"; @@ -83,7 +79,7 @@ export function SiteNavbar() { Search - {shortcut} + {shortcut} diff --git a/lib/use-keyboard-shortcut-label.ts b/lib/use-keyboard-shortcut-label.ts new file mode 100644 index 0000000..ac1e3c5 --- /dev/null +++ b/lib/use-keyboard-shortcut-label.ts @@ -0,0 +1,21 @@ +"use client"; + +import { useSyncExternalStore } from "react"; + +const APPLE_DEVICE_PATTERN = /(Mac|iPhone|iPad)/i; + +function subscribe() { + return () => {}; +} + +function getServerSnapshot() { + return "Ctrl K"; +} + +function getClientSnapshot() { + return APPLE_DEVICE_PATTERN.test(window.navigator.platform) ? "Cmd K" : "Ctrl K"; +} + +export function useKeyboardShortcutLabel() { + return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot); +}