Prereqs colored and expands more info

Author: daDevBoat

my-app/index.html

@@ -4,6 +4,10 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<link href="/src/styles.css" rel="stylesheet">
+		<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Find my course</title>
 	</head>

my-app/package-lock.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+
+    "@headlessui/react": "^2.2.1",
+    "@heroicons/react": "^2.2.0",
     "@dagrejs/dagre": "^1.1.4",
     "@tailwindcss/vite": "^4.0.17",
     "@xyflow/react": "^12.5.5",

my-app/package.json

@@ -1,4 +1,4 @@
-import { addCourse, addReviewForCourse, getReviewsForCourse } from "../firebase"; // for reviews
+import { addCourse, addReviewForCourse, getReviewsForCourse } from "../firebase";
 
 
 export const model = {

my-app/src/model.js

@@ -1,21 +1,22 @@
 import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
-import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
+import { SidebarPresenter } from '../presenters/SidebarPresenter.jsx';
+import { SearchbarPresenter } from '../presenters/SearchbarPresenter.jsx';
 import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
-import SharedView from '../pages/SharedView.jsx'; 
+import { Routes, Route } from 'react-router-dom';
+import SharedView from '../pages/SharedView.jsx';
+import { model } from '/src/model.js';
 
 function MainAppLayout({ model }) {
 	return (
-		<div className="flex overflow-hidden h-screen w-screen">
-			<div className="flex-auto w-40% h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
+		<div className="flex h-screen w-screen overflow-hidden">
+			<div className="w-1/4 h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
 				<SidebarPresenter model={model} />
 			</div>
 			<div className="w-3/4 h-full flex flex-col">
-				<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white" style={{color: "red"}}>
+				<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
 					<SearchbarPresenter model={model} />
 				</div>
-				<div className="flex-auto border bg-[#121212]">
+				<div className="flex-auto border bg-[#121212] relative">
 					<ListViewPresenter model={model} />
 				</div>
 			</div>
@@ -24,14 +25,12 @@ function MainAppLayout({ model }) {
 }
 
 function App({ model }) {
-	//return (
-		//<Routes>
-		//	<Route path="/" element={<MainAppLayout model={model} />} />
-		//	<Route path="/share" element={<SharedView />} />
-		//</Routes>
-		return <MainAppLayout model={model} />;
-	//);
+	return (
+		<Routes>
+			<Route path="/" element={<MainAppLayout model={model} />} />
+			<Route path="/share" element={<SharedView model={model} />} />
+		</Routes>
+	);
 }
 
-export default App;
-
+export default App;

my-app/src/pages/App.jsx

@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
-.react-flow__node.no-handles .react-flow__handle {
-    display: none;
+:root {
+    --font-kanit: "Kanit", sans-serif;
+}
+
+.font-kanit {
+    font-family: var(--font-kanit);
 }