From 79b2c77f75f1981f5da417c9d6564a352935ec79 Mon Sep 17 00:00:00 2001
From: sky-ash <5kyl3r@proton.me>
Date: Sun, 3 Nov 2024 22:42:44 +0100
Subject: [PATCH] massive navbar overhaul!
---
src/App.jsx | 6 +-
src/components/Card.jsx | 60 ++++++---
src/components/Navigation.jsx | 226 +++++++++++++++++++++++++++++-----
src/components/Quiz.jsx | 66 +++++++---
src/pages/Lecture.jsx | 32 ++++-
src/pages/Path.jsx | 3 +
src/pages/Settings.jsx | 2 +
src/pages/Sources.jsx | 3 +
src/pages/Start.jsx | 4 +
9 files changed, 325 insertions(+), 77 deletions(-)
diff --git a/src/App.jsx b/src/App.jsx
index 4794866..6c9e1b7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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';
@@ -47,10 +46,7 @@ export default function App() {
} />
-
-
-
-
+
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index e6ab52b..791deea 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -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([]);
@@ -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);
@@ -108,23 +124,31 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
);
})}
-
- {/* Navigation buttons */}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 8a60d5d..1e2faca 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -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 (
-
- {/* Link to the learning path */}
-
-
-
-
-
-
-
- {/* Link to the home page */}
-
-
-
-
+
+ const location = useLocation();
+ if (location.pathname === '/') {
+ return (
+
+
+
+
+ START
+
+
+
+ );
+ }
+
+ else if (location.pathname === '/path') {
+ return (
+
+
+
+
+
+
- {/* Spacer to push the settings icon to the right */}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ else if (location.pathname === '/settings') {
+ return (
+
+
+
+
+
+
+
- {/* Link to the settings page */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ else if (location.pathname === '/sources') {
+ return (
+
+
-
+
-
+
-
-
- );
-}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ else if (location.pathname.startsWith('/lecture/')) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ else {
+ return null
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index e81938b..413c6c7 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -2,7 +2,7 @@
import React, { useState, useEffect } from 'react';
// Material-UI components
-import { Typography, Button, Box, Radio, RadioGroup, FormControlLabel, FormControl } from '@mui/material';
+import { Typography, Button, Box, Radio, RadioGroup, FormControlLabel, FormControl, Fab } from '@mui/material';
// Material-UI icons
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -105,13 +105,21 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
-
- {/* Button to navigate to the next question or submit the quiz */}
-
-
-
+
+
+ {currentQuestion < quiz.length - 1 ? 'Next' : 'Submit Quiz'}
+
+
) : (
@@ -161,17 +169,39 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
{/* Button to return to the path or review cards based on the score */}
{score >= 80 ? (
-
- }>
- Return to Path
-
-
+
+
+
+ to Path
+
+
) : (
-
- }>
- Review Cards
-
-
+
+
+
+ Review
+
+
)}
)}
diff --git a/src/pages/Lecture.jsx b/src/pages/Lecture.jsx
index 2950245..18649d5 100644
--- a/src/pages/Lecture.jsx
+++ b/src/pages/Lecture.jsx
@@ -2,20 +2,27 @@
// Import necessary components
import React, { useState, useEffect } from 'react';
-import { Button, Typography, Box, LinearProgress } from '@mui/material';
+import { Button, Typography, Box, LinearProgress, Fab, IconButton, AppBar, Toolbar, Link } from '@mui/material';
import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+import HomeIcon from '@mui/icons-material/Home';
+import NavigationIcon from '@mui/icons-material/Navigation';
+
// Import the parsed lecture content from json file
import parsedLectureContent from '../data/parsedLectureContent.json';
// Import the Card and Quiz components
import Card from '../components/Card';
import Quiz from '../components/Quiz';
+import Navigation from '../components/Navigation';
// The Lecture component
export default function Lecture() {
// Get lecture ID from the URL
const { id } = useParams();
+ const navigate = useNavigate();
// Get the lecture data based on the ID
const lecture = parsedLectureContent.lectures[id - 1];
@@ -125,13 +132,32 @@ export default function Lecture() {
totalCards={lecture.cards.length}
parsedLectureContent={parsedLectureContent}
/>
- {/* Button to start the quiz */}
+ {/*
-
+ */}
+
+
+
+ Start Quiz
+
+
+
+
) : (
// Quiz component
diff --git a/src/pages/Path.jsx b/src/pages/Path.jsx
index 2a00366..5bd979e 100644
--- a/src/pages/Path.jsx
+++ b/src/pages/Path.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
import { Typography, Box, Button, SwipeableDrawer } from '@mui/material';
import { useNavigate } from 'react-router-dom';
+import Navigation from '../components/Navigation';
+
import parsedLectureContent from '../data/parsedLectureContent.json';
export default function Path() {
@@ -113,6 +115,7 @@ export default function Path() {
+
);
}
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 181b49f..860b2cd 100644
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -4,6 +4,7 @@ import React from 'react';
// Material-UI components
import { Typography, Switch, Button, Box } from '@mui/material';
+import Navigation from '../components/Navigation';
// Settings component
export default function Settings({ darkMode, setDarkMode }) {
@@ -30,6 +31,7 @@ export default function Settings({ darkMode, setDarkMode }) {
+
);
}
\ No newline at end of file
diff --git a/src/pages/Sources.jsx b/src/pages/Sources.jsx
index 7556818..b364b38 100644
--- a/src/pages/Sources.jsx
+++ b/src/pages/Sources.jsx
@@ -2,6 +2,8 @@
import React from 'react';
+import Navigation from '../components/Navigation';
+
// Material-UI components
import { Typography, List, ListItem, ListItemText } from '@mui/material';
@@ -29,6 +31,7 @@ export default function Sources() {
))}
+
);
}
\ No newline at end of file
diff --git a/src/pages/Start.jsx b/src/pages/Start.jsx
index 0dc8c04..3c996e6 100644
--- a/src/pages/Start.jsx
+++ b/src/pages/Start.jsx
@@ -3,6 +3,7 @@
import React from 'react';
import { Typography, Button, Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';
+import Navigation from '../components/Navigation';
export default function Start() {
// Hook to navigate between routes
@@ -26,6 +27,7 @@ export default function Start() {
+ {/*
+ */}
+
);
}
\ No newline at end of file