settings page fully translated

src/renderer/components/settings/setting-container.component.tsx

@@ -1,11 +1,15 @@
 import { ReactNode } from "react";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
+
+  const t = useTranslation();
+
   return (
     <div className={className || "relative mb-5"}>
-        { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{title}</h1> }
-        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{minorTitle}</h2> }
-        { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{description}</p> }
+        { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{t(title)}</h1> }
+        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{t(minorTitle)}</h2> }
+        { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{t(description)}</p> }
         { children }
     </div>
   )

src/renderer/components/settings/setting-radio-array.component.tsx

@@ -1,8 +1,11 @@
 import { motion } from "framer-motion"
+import { useTranslation } from "renderer/hooks/use-translation.hook"
 import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
 
 export function SettingRadioArray({items, selectedItem = items[0].id, onItemSelected}: {items: RadioItem[], selectedItem?: number, onItemSelected?: (id: number) => void}) {
 
+  const t = useTranslation();
+
   return (
     <div className="w-full">
         { items.map(i => (
@@ -11,11 +14,11 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele
                     <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
                         <motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full"/>
                     </div>
-                    <h2 className="font-extrabold">{i.text}</h2>
+                    <h2 className="font-extrabold">{t(i.text)}</h2>
                 </div>
                 {i.icon && (
                     <div className="flex items-center">
-                        {i.textIcon && <span className="text-sm">{i.textIcon}</span>}
+                        {i.textIcon && <span className="text-sm">{t(i.textIcon)}</span>}
                         <BsmIcon icon={i.icon} className="max-h-5 w-fit ml-2"/>
                     </div>
                 )}

src/renderer/components/shared/bsm-button.component.tsx

@@ -2,14 +2,18 @@ import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
 import OutsideClickHandler from 'react-outside-click-handler';
 import React from "react";
 import { BsmImage } from "./bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, disabled?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void}) {
+
+  const t = useTranslation();
+
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
       <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${disabled && "brightness-75 cursor-not-allowed"}`} style={style}>
         { image && <BsmImage image={image} className={imgClassName}/> }
         { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
-        {text && (type === "submit" ? <button className="w-full h-full">{text}</button> : <span>{text}</span>)}
+        {text && (type === "submit" ? <button className="w-full h-full">{t(text)}</button> : <span>{t(text)}</span>)}
         { withBar && (
           <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
             <div className="absolute top-0 left-0 h-full w-full bg-inherit brightness-50"/>
@@ -18,6 +22,6 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
         )}
       </div>
     </OutsideClickHandler>
-    
+
   )
 }