chore: use useTranslate from react lib

src/components/Cmdk.tsx

@@ -1,8 +1,7 @@
 import { CircleIcon, FileIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { Trans } from "react-i18next";
-import { t } from "i18next";
+import { Trans, useTranslation } from "react-i18next";
 import {
   Button,
   CommandDialog,
@@ -15,13 +14,10 @@ import {
 } from "#/components/ui";
 import { cn } from "#/lib/utils";
 
-export function CommandMenu({
-  commands,
-  placeholder = "Busca global",
-  ...props
-}) {
+export function CommandMenu({ commands, ...props }) {
   const navigate = useNavigate();
   const [open, setOpen] = React.useState(false);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     const down = (e) => {
@@ -51,7 +47,7 @@ export function CommandMenu({
         onClick={() => setOpen(true)}
         {...props}
       >
-        <span className="inline-flex">{placeholder}</span>
+        <span className="inline-flex">{t("Global search")}</span>
         <kbd className="bg-muted top- pointer-events-none absolute right-1.5 hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
           <span className="text-xs">⌘</span>K
         </kbd>

src/components/DataTable/DataTableToolbar.tsx

@@ -1,6 +1,7 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import React, { useEffect, useRef } from "react";
-import { t } from "i18next";
+
+import { useTranslation } from "react-i18next";
 import { Button, Input } from "#/components/ui";
 
 import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
@@ -39,11 +40,13 @@ export function DataTableToolbar({
     }
   }, [filters, table]);
 
+  const { t } = useTranslation();
+
   return (
     <div className="flex items-start justify-between">
       <div className="flex flex-1 items-start space-x-2">
         <Input
-          placeholder={t("Search", "Search...")}
+          placeholder={t("Search...")}
           value={table.getColumn(searchKey)?.getFilterValue() ?? ""}
           onChange={(event) =>
             table.getColumn(searchKey)?.setFilterValue(event.target.value)

src/components/RichTextEditor/index.tsx

@@ -1,6 +1,7 @@
 import "./styles.css";
 
 import React, { Suspense, lazy } from "react";
+import { useTranslation } from "react-i18next";
 import { useTheme } from "#/components/ThemeToggle/context";
 
 const JoditEditor = lazy(() => import("jodit-react"));
@@ -46,13 +47,16 @@ const EDITOR_BUTTONS = [
 
 export function RichTextEditor({ initialValue, onChange }) {
   const { theme } = useTheme();
+  const { t } = useTranslation();
 
   return (
     <div>
       <Suspense fallback={<>Loading...</>}>
         <JoditEditor
           value={initialValue}
           config={{
+            // @ts-ignore
+            placeholder: t("Start writing..."),
             readonly: false,
             height: 300,
             theme,

src/locales/en/translation.json

@@ -1,9 +1,11 @@
 {
   "Type a command or search": "Type a command or search",
   "No results found": "No results found",
+  "Global search": "Global search",
   "Items per page": "Items per page",
   "Page {{currentPage}} of": "Page {{currentPage}} of",
-  "Search": "Search...",
+  "Search...": "Search...",
+  "Start writing...": "Start writing...",
   "View": "View",
   "Toggle columns": "Toggle columns",
   "Something went wrong!": "Something went wrong!",

src/locales/pt-BR/translation.json

@@ -1,9 +1,11 @@
 {
   "Type a command or search": "Digite um comando ou pesquise",
   "No results found": "Nenhum resultado foi encontrado",
+  "Global search": "Busca global",
   "Items per page": "Itens por página",
   "Page {{currentPage}} of": "Página {{currentPage}} de",
-  "Search": "Pesquisar",
+  "Search...": "Pesquisar...",
+  "Start writing...": "Comece a escrever...",
   "View": "Visualizar",
   "Toggle columns": "Alternar colunas",
   "Something went wrong!": "Something went wrong!",