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',