Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-17 13:21:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

i18n for tutorial

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-21 20:02:06 +02:00
parent b68849592e
commit 653532e78e
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
i18n.js
View File

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

12
public/locales/en/tutorial.json Normal file
View File

@ -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"
}
}

10
src/components/Tutorials/Tutorials.tsx
View File

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

27
src/components/Tutorials/useHandleTutorials.tsx
View File

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