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

Apply theme

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-20 12:53:25 +02:00
parent b965f0b317
commit 5153676ab3
1 changed files with 91 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,72 +1,103 @@
import React, { useContext, useState } from 'react'
import { GlobalContext, MyContext } from '../../App';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tab, Tabs, Typography } from '@mui/material';
import { useContext, useState } from 'react';
import { GlobalContext } from '../../App';
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Tab,
Tabs,
useTheme,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { VideoPlayer } from '../Embeds/VideoPlayer';
export const Tutorials = () => {
const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
const [multiNumber, setMultiNumber] = useState(0)
const handleClose = ()=> {
setOpenTutorialModal(null)
setMultiNumber(0)
}
if(!openTutorialModal) return null
if(openTutorialModal?.multi){
const selectedTutorial = openTutorialModal?.multi[multiNumber]
return (
<Dialog
const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
const [multiNumber, setMultiNumber] = useState(0);
const theme = useTheme();
const handleClose = () => {
setOpenTutorialModal(null);
setMultiNumber(0);
};
if (!openTutorialModal) return null;
if (openTutorialModal?.multi) {
const selectedTutorial = openTutorialModal?.multi[multiNumber];
return (
<Dialog
onClose={handleClose}
aria-labelledby="customized-dialog-title"
open={!!openTutorialModal}
fullWidth={true}
maxWidth="xl"
>
<Tabs sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
},
}} value={multiNumber} onChange={(e, value)=> setMultiNumber(value)} aria-label="basic tabs example">
{openTutorialModal?.multi?.map((item, index)=> {
return (
<Tab sx={{
"&.Mui-selected": {
color: "white",
},
}} label={item?.title} value={index} />
)
})}
</Tabs>
<DialogTitle sx={{ m: 0, p: 2 }} >
<Tabs
sx={{
'& .MuiTabs-indicator': {
backgroundColor: theme.palette.background.default,
},
}}
value={multiNumber}
onChange={(e, value) => setMultiNumber(value)}
aria-label="basic tabs example"
>
{openTutorialModal?.multi?.map((item, index) => {
return (
<Tab
sx={{
'&.Mui-selected': {
color: theme.palette.text.primary,
},
}}
label={item?.title}
value={index}
/>
);
})}
</Tabs>
<DialogTitle sx={{ m: 0, p: 2 }}>
{selectedTutorial?.title} {` Tutorial`}
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={(theme) => ({
sx={{
position: 'absolute',
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
color: theme.palette.text.primary,
}}
>
<CloseIcon />
</IconButton>
<DialogContent dividers sx={{
height: '85vh'
}}>
<VideoPlayer node="https://ext-node.qortal.link" {...selectedTutorial?.resource || {}} />
<DialogContent
dividers
sx={{
height: '85vh',
}}
>
<VideoPlayer
node="https://ext-node.qortal.link"
{...(selectedTutorial?.resource || {})}
/>
</DialogContent>
<DialogActions>
<Button variant="contained" onClick={handleClose}>
Close
Close
</Button>
</DialogActions>
</Dialog>
)
}
);
}
return (
<>
<Dialog
@ -76,33 +107,41 @@ export const Tutorials = () => {
fullWidth={true}
maxWidth="xl"
>
<DialogTitle sx={{ m: 0, p: 2 }} >
<DialogTitle sx={{ m: 0, p: 2 }}>
{openTutorialModal?.title} {` Tutorial`}
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={(theme) => ({
sx={{
position: 'absolute',
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
color: theme.palette.text.primary,
}}
>
<CloseIcon />
</IconButton>
<DialogContent dividers sx={{
height: '85vh'
}}>
<VideoPlayer node="https://ext-node.qortal.link" {...openTutorialModal?.resource || {}} />
<DialogContent
dividers
sx={{
height: '85vh',
}}
>
<VideoPlayer
node="https://ext-node.qortal.link"
{...(openTutorialModal?.resource || {})}
/>
</DialogContent>
<DialogActions>
<Button variant="contained" onClick={handleClose}>
Close
Close
</Button>
</DialogActions>
</Dialog>
</>
)
}
);
};