feat(i18n): localize static elements, navbar switcher, and search palette

components/search-command.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { Icon } from "@iconify/react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/routing";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
 import {
   CommandPalette,
   CommandPaletteContent,
@@ -15,7 +16,7 @@ import {
   CommandPaletteSeparator,
 } from "poyraz-ui/molecules";
 import {
-  COMMAND_PALETTE_GROUPS,
+  getCommandPaletteGroups,
   type CommandPaletteItem as PaletteItem,
 } from "@/lib/command-palette-links";
 import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
@@ -27,8 +28,17 @@ type SearchCommandProps = {
 
 export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
   const router = useRouter();
+  const locale = useLocale();
+  const tLinks = useTranslations("Links");
+  const tNav = useTranslations("Nav");
+  const t = useTranslations("SearchCommand");
   const shortcut = useKeyboardShortcutLabel();
   const [query, setQuery] = useState("");
+
+  const groups = useMemo(() => {
+    return getCommandPaletteGroups(locale, tLinks, tNav);
+  }, [locale, tLinks, tNav]);
+
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (!nextOpen) {
       setQuery("");
@@ -51,11 +61,11 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
 
   const filteredGroups = useMemo(() => {
     const value = query.trim().toLowerCase();
-    if (!value) return COMMAND_PALETTE_GROUPS;
+    if (!value) return groups;
 
     const tokens = value.split(/\s+/).filter(Boolean);
 
-    return COMMAND_PALETTE_GROUPS.map((group) => ({
+    return groups.map((group) => ({
       ...group,
       items: group.items.filter((item) => {
         const haystack = [
@@ -70,7 +80,7 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
         return tokens.every((token) => haystack.includes(token));
       }),
     })).filter((group) => group.items.length > 0);
-  }, [query]);
+  }, [query, groups]);
 
   const handleCommandSelect = (item: PaletteItem) => {
     handleOpenChange(false);
@@ -87,13 +97,13 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
     <CommandPalette open={open} onOpenChange={handleOpenChange}>
       <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="Sayfa ve bağlantılarda ara..."
+          placeholder={t("placeholder")}
           className="mt-2 pr-10"
           onValueChange={setQuery}
         />
         <CommandPaletteList>
           {filteredGroups.length === 0 ? (
-            <CommandPaletteEmpty>Sonuç bulunamadı.</CommandPaletteEmpty>
+            <CommandPaletteEmpty>{t("empty")}</CommandPaletteEmpty>
           ) : (
             filteredGroups.map((group, index) => (
               <div key={group.id}>
@@ -115,7 +125,7 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
           )}
         </CommandPaletteList>
         <CommandPaletteFooter className="text-xs text-muted-foreground">
-          Hızlıca açmak için {shortcut} kullan
+          {t("footer", { shortcut })}
         </CommandPaletteFooter>
       </CommandPaletteContent>
     </CommandPalette>