Skip to content

Commit

Permalink
Merge pull request #20 from sky-ash/main-241104
Browse files Browse the repository at this point in the history 
Main 241104
  • Loading branch information
@sky-ash
sky-ash authored Nov 4, 2024
2 parents 757dd18 + 30be7e7 commit 26fdfe6
Show file tree
Hide file tree
Showing 9 changed files with 325 additions and 77 deletions.
6 changes: 1 addition & 5 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Settings from './pages/Settings';
import Sources from './pages/Sources';

import Navigation from './components/Navigation';
import InfoButton from './components/InfoButton';

import { lightTheme, darkTheme } from './theme';

Expand Down Expand Up @@ -47,10 +46,7 @@ export default function App() {
<Route path="/sources" element={<Sources />} />
</Routes>
</Box>

<InfoButton />
<Navigation />


</Container>
</Router>
</ThemeProvider>
Expand Down
60 changes: 42 additions & 18 deletions src/components/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,31 @@
import React, { useState, useEffect } from 'react';

// Material-UI components
import { Box, Typography, TextField, Button, Autocomplete } from '@mui/material';
import { Box, Typography, TextField, Button, Autocomplete, Icon } from '@mui/material';
import { AppBar, Toolbar, IconButton, Fab } from '@mui/material';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

// Material-UI icons
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
import NavigationIcon from '@mui/icons-material/Navigation';
import HomeIcon from '@mui/icons-material/Home';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';


// Import parsed lecture content data
import parsedLectureContent from '../data/parsedLectureContent.json';
import { TurnLeft } from '@mui/icons-material';


// Card component
export default function Card({ card, nextCard, prevCard, onCardCompletion, currentCardIndex, unlockedCards, totalCards }) {
// State to manage answers
const [answers, setAnswers] = useState([]);

const navigate = useNavigate();
// State to manage correctness of answers
const [correctness, setCorrectness] = useState([]);

Expand Down Expand Up @@ -56,6 +67,11 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
}
};

// Function to handle navigation back to the path
const handleReturnToPath = () => {
navigate('/path');
};

// Check if all answers are correct
const allCorrect = correctness.every(c => c === true);

Expand Down Expand Up @@ -108,23 +124,31 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
);
})}
</Typography>

{/* Navigation buttons */}
<Box p='16px' width='100%' sx={{ position: 'fixed', bottom: '32px', right: 0, marginBottom: '4rem'}}>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={4}>
<Button
variant="contained"
color="secondary"
onClick={prevCard}
disabled={currentCardIndex === 0 && !unlockedCards.includes(totalCards - 1)}
>
Previous
</Button>
<Button variant="contained" color="primary" onClick={nextCard} disabled={!allCorrect}>
Next
</Button>
</Box>
</Box>
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0
}}>

<Fab color="primary"
onClick={handleReturnToPath}
sx={{ position: 'fixed', zIndex: 1,
top: 32, right: 32, }}>
<TurnLeft />
</Fab>

<Toolbar>
<IconButton color="primary" onClick={prevCard}
disabled={currentCardIndex === 0 && !unlockedCards.includes(totalCards - 1)}>
<ArrowBackIosIcon />
</IconButton>
<Box sx={{flexGrow: 1}} />
<IconButton color="primary" onClick={nextCard} disabled={!allCorrect}>
<ArrowForwardIosIcon />
</IconButton>
</Toolbar>
</AppBar>
</Box>
);
}
226 changes: 193 additions & 33 deletions src/components/Navigation.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,205 @@
import React from 'react';
import { Box, Fab, IconButton, AppBar, Toolbar } from '@mui/material';
import { Link } from 'react-router-dom';
// src/components/Navigation.jsx

import React from 'react';
import { Box, Fab, Button, IconButton, AppBar, Toolbar, Typography } from '@mui/material';
import { useLocation, Link } from 'react-router-dom';
import SettingsIcon from '@mui/icons-material/Settings';
import HomeIcon from '@mui/icons-material/Home';
import AppsIcon from '@mui/icons-material/Apps';
import NavigationIcon from '@mui/icons-material/Navigation';
import { Apps } from '@mui/icons-material';
import InfoIcon from '@mui/icons-material/Info';
import { Replay, TurnLeft } from '@mui/icons-material';


export default function Navigation() {
return (
<AppBar
position="fixed"
sx={{ top: 'auto', bottom: 0, backgroundColor: 'background.paper' }}
>
{/* Link to the learning path */}
<Link to="/path">
<Fab
color="primary"
sx={{ position: 'absolute', zIndex: 1, margin: '0 auto', top: -20, left: 0, right: 0 }}
>
<AppsIcon />
</Fab>
</Link>

<Toolbar>
{/* Link to the home page */}
<Link to="/">
<IconButton color="primary">
<HomeIcon />
</IconButton>

const location = useLocation();
if (location.pathname === '/') {
return (
<Link to="/path">
<Fab color="primary"
variant='extended'
sx={{ position: 'fixed', zIndex: 1,
left: '50%', transform: 'translateX(-50%)',
bottom: 32, }}>
<Typography display='flex'
p={2}
alignItems='center'
variant='h6'
fontWeight='bold'
>
<NavigationIcon sx={{mr: 1}} />
START
</Typography>
</Fab>
</Link>
);
}

else if (location.pathname === '/path') {
return (
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0,
}}>

<Link to="/settings">
<Fab color="primary"
sx={{ position: 'absolute', zIndex: 1,
margin: '0 auto', top: -20,
left: 0, right: 0, }}>
<SettingsIcon />
</Fab>
</Link>

{/* Spacer to push the settings icon to the right */}
<Box sx={{ flexGrow: 1 }} />
<Toolbar>

<Link to="/" sx={{alignItems: 'flex-start'}}>
<IconButton color="primary">
<HomeIcon />
</IconButton>
</Link>

<Box sx={{flexGrow: 1}} />

<Link to="/sources">
<IconButton
color="primary"
>
<InfoIcon />
</IconButton>
</Link>

</Toolbar>

</AppBar>
);
}

else if (location.pathname === '/settings') {
return (
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0,
}}>

<Link to="/path">
<Fab color="primary"
sx={{ position: 'absolute', zIndex: 1,
margin: '0 auto', top: -20,
left: 0, right: 0, }}>
<NavigationIcon />
</Fab>
</Link>

{/* Link to the settings page */}
<Toolbar>

<Link to="/" sx={{alignItems: 'flex-start'}}>
<IconButton color="primary">
<HomeIcon />
</IconButton>
</Link>

<Box sx={{flexGrow: 1}} />

<Link to="/sources">
<IconButton
color="primary"
>
<InfoIcon />
</IconButton>
</Link>

</Toolbar>

</AppBar>
);
}
else if (location.pathname === '/sources') {
return (
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0,
}}>

<Link to="/settings">
<IconButton color="primary">
<Fab color="primary"
sx={{ position: 'absolute', zIndex: 1,
margin: '0 auto', top: -20,
left: 0, right: 0, }}>
<SettingsIcon />
</IconButton>
</Fab>
</Link>
</Toolbar>
</AppBar>
);
}

<Toolbar>

<Link to="/" sx={{alignItems: 'flex-start'}}>
<IconButton color="primary">
<HomeIcon />
</IconButton>
</Link>

<Box sx={{flexGrow: 1}} />

<Link to="/path">
<IconButton
color="primary"
>
<TurnLeft />
</IconButton>
</Link>

</Toolbar>

</AppBar>
);
}
else if (location.pathname.startsWith('/lecture/')) {
return (
<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0
}}>

<Link to="/path">
<Fab color="primary"
sx={{ position: 'absolute', zIndex: 1,
margin: '0 auto', top: -20,
left: 0, right: 0, }}>
<NavigationIcon />
</Fab>
</Link>

<Toolbar>
<Link to="/" sx={{alignItems: 'flex-start'}}>
<IconButton color="primary">
<HomeIcon />
</IconButton>
</Link>

<Box sx={{flexGrow: 1}} />

<Link to="/path" sx={{alignItems: 'flex-end'}}>
<IconButton color="primary">
<TurnLeft />
</IconButton>
</Link>

</Toolbar>
</AppBar>
);
}
else {
return null
}

}
Loading

0 comments on commit 26fdfe6

Please sign in to comment.