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

feat: implement core UI components and build initial dashboard layout with navigation structure

Browse Source
This commit is contained in:
RaymondVerhoef
2026-05-10 10:52:12 +02:00
parent 2fb50a19c9
commit b988028cf8
13 changed files with 365 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.jsx
View File

@@ -1,10 +1,11 @@
import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Routes, Route, Navigate, Link } from 'react-router-dom'
import { useApp } from './store/AppContext'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
// Placeholder components for routing structure
const Login = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Login</h1><p className="mt-4">Please log in.</p></div>
const Dashboard = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Dashboard</h1><p className="mt-4">Welcome to Respellion Leerplatform.</p></div>
const Admin = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Admin</h1><p className="mt-4">Kennisbeheer and Source Upload.</p></div>
const Testen = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
const Leren = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</p></div>
@@ -12,9 +13,9 @@ const Leaderboard = () => <div className="p-8"><h1 className="text-4xl text-teal
// Protected Route Wrapper
const ProtectedRoute = ({ children, requireAdmin }) => {
const { state } = useApp()
const { state, logout } = useApp()
if (state.isLoading) return <div className="p-8">Loading...</div>
if (state.isLoading) return <div className="p-8">Laden...</div>
if (!state.currentUser) {
return <Navigate to="/login" replace />
@@ -26,20 +27,31 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
return (
<div className="min-h-screen bg-bg text-fg font-sans flex flex-col">
{/* Basic Navigation Bar Placeholder */}
<nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center">
<div className="font-bold text-xl tracking-tight">{`{ r espellion }`}</div>
<div className="flex gap-4">
<a href="/" className="hover:text-accent-soft">Dashboard</a>
<a href="/learn" className="hover:text-accent-soft">Leren</a>
<a href="/test" className="hover:text-accent-soft">Testen</a>
<a href="/leaderboard" className="hover:text-accent-soft">Leaderboard</a>
{/* Navigation Bar */}
<nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center sticky top-0 z-50">
<Link to="/" className="flex items-center">
<img src="/images/logo-light.png" alt="Respellion Logo" className="h-8 object-contain" />
</Link>
<div className="flex items-center gap-6 text-sm font-medium">
<Link to="/" className="hover:text-accent-soft transition-colors">Dashboard</Link>
<Link to="/learn" className="hover:text-accent-soft transition-colors">Leren</Link>
<Link to="/test" className="hover:text-accent-soft transition-colors">Testen</Link>
<Link to="/leaderboard" className="hover:text-accent-soft transition-colors">Leaderboard</Link>
{state.currentUser.role === 'admin' && (
<a href="/admin" className="hover:text-accent-soft">Admin</a>
<Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-1">
<span className="w-2 h-2 rounded-full bg-accent inline-block"></span>
Admin
</Link>
)}
<button
onClick={logout}
className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors"
>
Uitloggen
</button>
</div>
</nav>
<main className="flex-1 max-w-[var(--max)] w-full mx-auto">
<main className="flex-1 w-full max-w-[var(--max)] mx-auto">
{children}
</main>
</div>
@@ -49,7 +61,7 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
function App() {
const { state } = useApp()
if (state.isLoading) return <div className="p-8">Loading application state...</div>
if (state.isLoading) return <div className="p-8 flex items-center justify-center min-h-screen">De applicatie wordt geladen...</div>
return (
<Routes>