added translations

src/modules/editor/components/EditorWrapper/index.tsx

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from "react";
-import styles from "./styles.module.scss";
+import { useTranslation } from "react-i18next";
 import { Button } from "~/components/buttons/Button";
+import styles from "./styles.module.scss";
 
 interface EditorWrapperProps extends PropsWithChildren {
   save: () => void;
@@ -8,19 +9,21 @@ interface EditorWrapperProps extends PropsWithChildren {
 }
 
 const EditorWrapper: FC<EditorWrapperProps> = ({ children, save, remove }) => {
+  const { t } = useTranslation();
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>{children}</div>
 
       <div className={styles.panel}>
         <Button onClick={remove} role="button" size="small" variant="outline">
-          Delete
+          {t("Delete")}
         </Button>
 
         <div className={styles.filler} />
 
         <Button onClick={save} role="button" size="small">
-          Save
+          {t("Save")}
         </Button>
       </div>
     </div>

src/modules/editor/components/EmptyViewer/index.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
-import styles from "./styles.module.scss";
-import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+import { useTranslation } from "react-i18next";
 import { Button } from "~/components/buttons/Button";
+import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+import styles from "./styles.module.scss";
 
 interface EmptyViewerProps {
   startEditing?: () => void;
@@ -9,10 +10,11 @@ interface EmptyViewerProps {
 
 const EmptyViewer: FC<EmptyViewerProps> = ({ startEditing }) => {
   const style = useContainerPaddings();
+  const { t } = useTranslation();
 
   return (
     <div className={styles.empty} style={style}>
-      <div className={styles.title}>Nothing's here</div>
+      <div className={styles.title}>{t(`Nothing's here yet`)}</div>
       <div>
         <Button
           onClick={startEditing}
@@ -20,7 +22,7 @@ const EmptyViewer: FC<EmptyViewerProps> = ({ startEditing }) => {
           variant="outline"
           size="small"
         >
-          Edit it
+          {t("Edit")}
         </Button>
       </div>
     </div>

src/modules/editor/components/ReactMarkdownViewer/index.tsx

@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
 import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
 import styles from "./styles.module.scss";
 import { Button } from "~/components/buttons/Button";
+import { useTranslation } from "react-i18next";
 
 interface ReactMarkdownViewerProps {
   value: string;
@@ -13,6 +14,7 @@ const ReactMarkdownViewer: FC<ReactMarkdownViewerProps> = ({
   value,
   startEditing,
 }) => {
+  const { t } = useTranslation();
   const style = useContainerPaddings();
 
   return (
@@ -24,7 +26,7 @@ const ReactMarkdownViewer: FC<ReactMarkdownViewerProps> = ({
           role="button"
           onClick={startEditing}
         >
-          Edit
+          {t("Edit")}
         </Button>
       </div>
 

src/modules/settings/containers/SettingsContainer/index.tsx

@@ -1,8 +1,10 @@
 import { ChangeEvent, FC, useCallback } from "react";
 import { useSettings } from "../../context/SettingsContext";
+import { useTranslation } from "react-i18next";
 
 const SettingsContainer: FC = () => {
   const { update, settings } = useSettings();
+  const { t } = useTranslation();
 
   const updateBackgroundColor = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -26,8 +28,10 @@ const SettingsContainer: FC = () => {
 
   return (
     <div>
+      <h2>{t("Colors")}</h2>
+
       <label htmlFor="color">
-        Background
+        {t("Background")}
         <input
           type="color"
           id="color"
@@ -37,7 +41,8 @@ const SettingsContainer: FC = () => {
       </label>
 
       <label htmlFor="color">
-        Text
+        {t("Text")}
+
         <input
           type="color"
           id="color"
@@ -47,7 +52,8 @@ const SettingsContainer: FC = () => {
       </label>
 
       <label htmlFor="color">
-        Link
+        {t("Links")}
+
         <input
           type="color"
           id="color"

src/modules/settings/context/SettingsContext.ts

@@ -21,4 +21,5 @@ export const SettingsContext = createContext({
   show: () => {},
   hide: () => {},
 });
+
 export const useSettings = () => useContext(SettingsContext);