rve/learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement core knowledge graph UI components, extraction pipeline, and initial platform navigation pages

Browse Source
This commit is contained in:
RaymondVerhoef
2026-05-10 21:33:02 +02:00
parent a626042092
commit 31aacd68d5
14 changed files with 1634 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.jsx
View File

@@ -8,16 +8,16 @@ import Dashboard from './pages/Dashboard'
import Admin from './pages/Admin'
import Leren from './pages/Leren'
import Testen from './pages/Testen'
// Placeholder components for routing structure
const Testen = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
const Leaderboard = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</p></div>
// Protected Route Wrapper
const ProtectedRoute = ({ children, requireAdmin }) => {
const { state, logout } = useApp()
if (state.isLoading) return <div className="p-8">Laden...</div>
if (state.isLoading) return <div className="p-8">Loading...</div>
if (!state.currentUser) {
return <Navigate to="/login" replace />
@@ -38,8 +38,8 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
{/* Desktop Links */}
<div className="hidden md:flex items-center gap-6 text-sm font-medium">
<Link to="/" className="hover:text-accent-soft transition-colors flex items-center gap-2"><LayoutDashboard size={16}/> Dashboard</Link>
<Link to="/learn" className="hover:text-accent-soft transition-colors flex items-center gap-2"><BookOpen size={16}/> Leren</Link>
<Link to="/test" className="hover:text-accent-soft transition-colors flex items-center gap-2"><CheckSquare size={16}/> Testen</Link>
<Link to="/learn" className="hover:text-accent-soft transition-colors flex items-center gap-2"><BookOpen size={16}/> Learn</Link>
<Link to="/test" className="hover:text-accent-soft transition-colors flex items-center gap-2"><CheckSquare size={16}/> Test</Link>
<Link to="/leaderboard" className="hover:text-accent-soft transition-colors flex items-center gap-2"><Trophy size={16}/> Leaderboard</Link>
{state.currentUser.role === 'admin' && (
<Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-2">
@@ -50,7 +50,7 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
onClick={logout}
className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors flex items-center gap-2"
>
<LogOut size={14}/> Uitloggen
<LogOut size={14}/> Sign Out
</button>
</div>
@@ -65,8 +65,8 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
{/* Mobile Bottom Navigation */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-paper border-t border-bg-warm flex justify-around items-center p-2 z-50">
<Link to="/" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><LayoutDashboard size={20}/><span className="text-[10px] mt-1 font-medium">Home</span></Link>
<Link to="/learn" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><BookOpen size={20}/><span className="text-[10px] mt-1 font-medium">Leren</span></Link>
<Link to="/test" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><CheckSquare size={20}/><span className="text-[10px] mt-1 font-medium">Testen</span></Link>
<Link to="/learn" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><BookOpen size={20}/><span className="text-[10px] mt-1 font-medium">Learn</span></Link>
<Link to="/test" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><CheckSquare size={20}/><span className="text-[10px] mt-1 font-medium">Test</span></Link>
<Link to="/leaderboard" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Trophy size={20}/><span className="text-[10px] mt-1 font-medium">Score</span></Link>
{state.currentUser.role === 'admin' && (
<Link to="/admin" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Settings size={20}/><span className="text-[10px] mt-1 font-medium">Admin</span></Link>
@@ -83,7 +83,7 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
function App() {
const { state } = useApp()
if (state.isLoading) return <div className="p-8 flex items-center justify-center min-h-screen">De applicatie wordt geladen...</div>
if (state.isLoading) return <div className="p-8 flex items-center justify-center min-h-screen">Loading application...</div>
return (
<Routes>