i18n for tutorial

i18n.js

@@ -27,7 +27,7 @@ i18n
   .init({
     debug: isDev,
     fallbackLng: 'en',
-    ns: ['auth', 'core'],
+    ns: ['auth', 'core', 'tutorial'],
     supportedLngs: ['en', 'it'],
     backend: {
       backends: [LocalStorageBackend, HttpBackend],

public/locales/en/tutorial.json

@@ -0,0 +1,12 @@
+{
+  "1_getting_started": "1. Getting Started",
+  "2_overview": "2. Overview",
+  "3_groups": "3. Qortal Groups",
+  "4_obtain_qort": "4. Obtaining Qort",
+  "account_creation": "Account Creation",
+  "important_info": "Important Information!",
+  "apps": {
+    "dashboard": "1. Apps Dashboard",
+    "navigation": "2. Apps Navigation"
+  }
+}

src/components/Tutorials/Tutorials.tsx

@@ -13,11 +13,13 @@ import {
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { VideoPlayer } from '../Embeds/VideoPlayer';
+import { useTranslation } from 'react-i18next';
 
 export const Tutorials = () => {
   const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
   const [multiNumber, setMultiNumber] = useState(0);
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'tutorial']);
 
   const handleClose = () => {
     setOpenTutorialModal(null);
@@ -61,9 +63,7 @@ export const Tutorials = () => {
           })}
         </Tabs>
 
-        <DialogTitle sx={{ m: 0, p: 2 }}>
-          {selectedTutorial?.title} {` Tutorial`}
-        </DialogTitle>
+        <DialogTitle sx={{ m: 0, p: 2 }}>{selectedTutorial?.title}</DialogTitle>
 
         <IconButton
           aria-label="close"
@@ -91,7 +91,7 @@ export const Tutorials = () => {
         </DialogContent>
         <DialogActions>
           <Button variant="contained" onClick={handleClose}>
-            Close
+            {t('core:close', { postProcess: 'capitalize' })}
           </Button>
         </DialogActions>
       </Dialog>
@@ -138,7 +138,7 @@ export const Tutorials = () => {
 
         <DialogActions>
           <Button variant="contained" onClick={handleClose}>
-            Close
+            {t('core:close', { postProcess: 'capitalize' })}
           </Button>
         </DialogActions>
       </Dialog>

src/components/Tutorials/useHandleTutorials.tsx

@@ -8,6 +8,7 @@ import navigationImg from './img/navigation.webp';
 import overviewImg from './img/overview.webp';
 import startedImg from './img/started.webp';
 import obtainingImg from './img/obtaining-qort.jpg';
+import { useTranslation } from 'react-i18next';
 
 const checkIfGatewayIsOnline = async () => {
   try {
@@ -27,9 +28,11 @@ const checkIfGatewayIsOnline = async () => {
     return false;
   }
 };
+
 export const useHandleTutorials = () => {
   const [openTutorialModal, setOpenTutorialModal] = useState<any>(null);
   const [shownTutorials, setShowTutorials] = useState(null);
+  const { t } = useTranslation(['core', 'tutorial']);
 
   useEffect(() => {
     try {
@@ -104,7 +107,9 @@ export const useHandleTutorials = () => {
               setOpenTutorialModal({
                 multi: [
                   {
-                    title: '1. Getting Started',
+                    title: t('tutorial:1_getting_started', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',
@@ -113,7 +118,9 @@ export const useHandleTutorials = () => {
                     },
                   },
                   {
-                    title: '2. Overview',
+                    title: t('tutorial:2_overview', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',
@@ -122,7 +129,9 @@ export const useHandleTutorials = () => {
                     },
                   },
                   {
-                    title: '3. Qortal Groups',
+                    title: t('tutorial:3_groups', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',
@@ -131,7 +140,9 @@ export const useHandleTutorials = () => {
                     },
                   },
                   {
-                    title: '4. Obtaining Qort',
+                    title: t('tutorial:4_obtain_qort', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',
@@ -151,7 +162,9 @@ export const useHandleTutorials = () => {
               setOpenTutorialModal({
                 multi: [
                   {
-                    title: '1. Apps Dashboard',
+                    title: t('tutorial:app.dashboard', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',
@@ -160,7 +173,9 @@ export const useHandleTutorials = () => {
                     },
                   },
                   {
-                    title: '2. Apps Navigation',
+                    title: t('tutorial:app.navigation', {
+                      postProcess: 'capitalize',
+                    }),
                     resource: {
                       name: 'a-test',
                       service: 'VIDEO',