diff --git a/i18n.js b/i18n.js index 6f21518..e785beb 100644 --- a/i18n.js +++ b/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], diff --git a/public/locales/en/tutorial.json b/public/locales/en/tutorial.json new file mode 100644 index 0000000..8aeab89 --- /dev/null +++ b/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" + } +} diff --git a/src/components/Tutorials/Tutorials.tsx b/src/components/Tutorials/Tutorials.tsx index 382774c..06274e7 100644 --- a/src/components/Tutorials/Tutorials.tsx +++ b/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 = () => { })} - - {selectedTutorial?.title} {` Tutorial`} - + {selectedTutorial?.title} { @@ -138,7 +138,7 @@ export const Tutorials = () => { diff --git a/src/components/Tutorials/useHandleTutorials.tsx b/src/components/Tutorials/useHandleTutorials.tsx index 1df8626..3569beb 100644 --- a/src/components/Tutorials/useHandleTutorials.tsx +++ b/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(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',