fix: fixed hydr error in site navbar

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 (
     <CommandPalette open={open} onOpenChange={onOpenChange}>
-      <CommandPaletteContent className=" rounded-none p-0 pt-3 w-72 sm:max-w-lg sm:rounded-sm sm:p-0 sm:pt-2">
+      <CommandPaletteContent className=" rounded-none p-0 pt-3 w-72 sm:w-full sm:max-w-xl sm:rounded-sm sm:p-0 sm:pt-2">
         <CommandPaletteInput
           placeholder="Search pages and links..."
           className="mt-2 pr-10"

components/site-navbar.tsx

@@ -3,7 +3,7 @@
 import { Icon } from "@iconify/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms";
 import {
   DropdownMenu,
@@ -19,6 +19,7 @@ import {
   SheetTrigger,
 } from "poyraz-ui/molecules";
 import { SearchCommand } from "@/components/search-command";
+import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
 import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
 
 function getNavLinkClass(isActive: boolean) {
@@ -33,12 +34,7 @@ function getNavLinkClass(isActive: boolean) {
 export function SiteNavbar() {
   const pathname = usePathname();
   const [searchOpen, setSearchOpen] = useState(false);
-
-  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();
 
   const isActiveLink = (href: string) => {
     if (href === "/") return pathname === "/";
@@ -83,7 +79,7 @@ export function SiteNavbar() {
             <Icon icon="mdi:magnify" width={16} height={16} />
             <span>Search</span>
           </span>
-          <span className="text-xs text-muted-foreground/80">{shortcut}</span>
+          <span className="text-xs text-muted-foreground">{shortcut}</span>
         </button>
 
         <DropdownMenu>

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);
+}