From acd143fd073e1e790eb161b702a2edfe3faa420f Mon Sep 17 00:00:00 2001
From: Yan Holtz <yan.holtz.data@gmail.com>
Date: Thu, 8 Aug 2024 09:20:29 +0200
Subject: [PATCH] fix top breadcrumb

---
 component/TocBreadcrumb.tsx                   | 68 ++++++++++++-------
 exercise/SvgLinePractice/SvgLine.tsx          |  9 +++
 .../SvgLinePractice}/index.js                 |  0
 .../SvgLinePractice}/package.json             |  0
 .../SvgLineSolution}/SvgLine.tsx              |  0
 exercise/SvgLineSolution/index.js             |  6 ++
 .../SvgLineSolution}/package.json             |  0
 .../SvgRectanglePractice/SvgRectangle.tsx     |  9 +++
 .../SvgRectanglePractice}/index.js            |  0
 .../SvgRectanglePractice}/package.json        |  0
 .../SvgRectangleSolution}/SvgRectangle.tsx    |  0
 exercise/SvgRectangleSolution/index.js        |  6 ++
 exercise/SvgRectangleSolution/package.json    | 28 ++++++++
 exercise/SvgTextPractice/SvgText.tsx          |  3 +
 .../SvgTextPractice}/index.js                 |  0
 exercise/SvgTextPractice/package.json         | 28 ++++++++
 .../SvgTextSolution}/SvgText.tsx              |  0
 exercise/SvgTextSolution/index.js             |  6 ++
 exercise/SvgTextSolution/package.json         | 28 ++++++++
 19 files changed, 166 insertions(+), 25 deletions(-)
 create mode 100644 exercise/SvgLinePractice/SvgLine.tsx
 rename {viz/SvgLine => exercise/SvgLinePractice}/index.js (100%)
 rename {viz/SvgLine => exercise/SvgLinePractice}/package.json (100%)
 rename {viz/SvgLine => exercise/SvgLineSolution}/SvgLine.tsx (100%)
 create mode 100644 exercise/SvgLineSolution/index.js
 rename {viz/SvgRectangle => exercise/SvgLineSolution}/package.json (100%)
 create mode 100644 exercise/SvgRectanglePractice/SvgRectangle.tsx
 rename {viz/SvgRectangle => exercise/SvgRectanglePractice}/index.js (100%)
 rename {viz/SvgText => exercise/SvgRectanglePractice}/package.json (100%)
 rename {viz/SvgRectangle => exercise/SvgRectangleSolution}/SvgRectangle.tsx (100%)
 create mode 100644 exercise/SvgRectangleSolution/index.js
 create mode 100644 exercise/SvgRectangleSolution/package.json
 create mode 100644 exercise/SvgTextPractice/SvgText.tsx
 rename {viz/SvgText => exercise/SvgTextPractice}/index.js (100%)
 create mode 100644 exercise/SvgTextPractice/package.json
 rename {viz/SvgText => exercise/SvgTextSolution}/SvgText.tsx (100%)
 create mode 100644 exercise/SvgTextSolution/index.js
 create mode 100644 exercise/SvgTextSolution/package.json

diff --git a/component/TocBreadcrumb.tsx b/component/TocBreadcrumb.tsx
index b4437dd8..cd5ba091 100644
--- a/component/TocBreadcrumb.tsx
+++ b/component/TocBreadcrumb.tsx
@@ -25,6 +25,7 @@ import { moduleList } from '@/util/moduleList';
 import { Lesson, lessonList } from '@/util/lessonList';
 import { Circle } from 'lucide-react';
 import { LessonBadge } from './LessonBadge';
+import Link from 'next/link';
 
 type TocBreadcrumbProps = {
   selectedLesson: Lesson;
@@ -41,6 +42,7 @@ export const TocBreadcrumb = ({ selectedLesson }: TocBreadcrumbProps) => {
   return (
     <Breadcrumb>
       <BreadcrumbList>
+        {/* ////////////// Most left = back to course home page */}
         <BreadcrumbItem>
           <BreadcrumbLink
             href="/react-d3-dataviz-course"
@@ -56,6 +58,7 @@ export const TocBreadcrumb = ({ selectedLesson }: TocBreadcrumbProps) => {
 
         <BreadcrumbSeparator />
 
+        {/* ////////////// Middle = list of modules */}
         <BreadcrumbItem>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -86,17 +89,24 @@ export const TocBreadcrumb = ({ selectedLesson }: TocBreadcrumbProps) => {
                           .filter((lesson) => lesson.moduleId === module.id)
                           .map((lesson, i) => {
                             return (
-                              <DropdownMenuItem key={i}>
-                                <Circle
-                                  fill="black"
-                                  size={8}
-                                  className="mr-2"
-                                  opacity={
-                                    lesson.name === selectedLesson.name ? 1 : 0
-                                  }
-                                />
-                                <span>{lesson.name}</span>
-                              </DropdownMenuItem>
+                              <Link
+                                className="no-underline text-black"
+                                href={lesson.link}
+                              >
+                                <DropdownMenuItem key={i}>
+                                  <Circle
+                                    fill="black"
+                                    size={8}
+                                    className="mr-2"
+                                    opacity={
+                                      lesson.name === selectedLesson.name
+                                        ? 1
+                                        : 0
+                                    }
+                                  />
+                                  <span>{lesson.name}</span>
+                                </DropdownMenuItem>
+                              </Link>
                             );
                           })}
                       </DropdownMenuSubContent>
@@ -110,6 +120,7 @@ export const TocBreadcrumb = ({ selectedLesson }: TocBreadcrumbProps) => {
 
         <BreadcrumbSeparator />
 
+        {/* ////////////// Right = list of lessons */}
         <BreadcrumbItem>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -126,21 +137,28 @@ export const TocBreadcrumb = ({ selectedLesson }: TocBreadcrumbProps) => {
                 .filter((lesson) => lesson.moduleId === selectedModuleId)
                 .map((lesson, i) => {
                   return (
-                    <DropdownMenuItem
-                      key={i}
-                      className="flex justify-between gap-4"
+                    <Link
+                      className="no-underline text-black"
+                      href={lesson.link}
                     >
-                      <div className="flex items-center">
-                        <Circle
-                          fill="black"
-                          size={8}
-                          className="mr-2"
-                          opacity={lesson.name === selectedLesson.name ? 1 : 0}
-                        />
-                        {lesson.name}
-                      </div>
-                      <LessonBadge lessonStatus={lesson.status} />
-                    </DropdownMenuItem>
+                      <DropdownMenuItem
+                        key={i}
+                        className="flex justify-between gap-4"
+                      >
+                        <div className="flex items-center">
+                          <Circle
+                            fill="black"
+                            size={8}
+                            className="mr-2"
+                            opacity={
+                              lesson.name === selectedLesson.name ? 1 : 0
+                            }
+                          />
+                          {lesson.name}
+                        </div>
+                        <LessonBadge lessonStatus={lesson.status} />
+                      </DropdownMenuItem>
+                    </Link>
                   );
                 })}
             </DropdownMenuContent>
diff --git a/exercise/SvgLinePractice/SvgLine.tsx b/exercise/SvgLinePractice/SvgLine.tsx
new file mode 100644
index 00000000..9d25d012
--- /dev/null
+++ b/exercise/SvgLinePractice/SvgLine.tsx
@@ -0,0 +1,9 @@
+export const SvgLine = () => {
+  return (
+    <svg width={500} height={300}>
+      <text x="50" y="50" fill="black">
+        Draw a line here!
+      </text>
+    </svg>
+  );
+};
diff --git a/viz/SvgLine/index.js b/exercise/SvgLinePractice/index.js
similarity index 100%
rename from viz/SvgLine/index.js
rename to exercise/SvgLinePractice/index.js
diff --git a/viz/SvgLine/package.json b/exercise/SvgLinePractice/package.json
similarity index 100%
rename from viz/SvgLine/package.json
rename to exercise/SvgLinePractice/package.json
diff --git a/viz/SvgLine/SvgLine.tsx b/exercise/SvgLineSolution/SvgLine.tsx
similarity index 100%
rename from viz/SvgLine/SvgLine.tsx
rename to exercise/SvgLineSolution/SvgLine.tsx
diff --git a/exercise/SvgLineSolution/index.js b/exercise/SvgLineSolution/index.js
new file mode 100644
index 00000000..d5fa2b85
--- /dev/null
+++ b/exercise/SvgLineSolution/index.js
@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { SvgLine } from './SvgLine';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<SvgLine />, rootElement);
diff --git a/viz/SvgRectangle/package.json b/exercise/SvgLineSolution/package.json
similarity index 100%
rename from viz/SvgRectangle/package.json
rename to exercise/SvgLineSolution/package.json
diff --git a/exercise/SvgRectanglePractice/SvgRectangle.tsx b/exercise/SvgRectanglePractice/SvgRectangle.tsx
new file mode 100644
index 00000000..b8aaeda5
--- /dev/null
+++ b/exercise/SvgRectanglePractice/SvgRectangle.tsx
@@ -0,0 +1,9 @@
+export const SvgRectangle = () => {
+  return (
+    <svg width={500} height={300}>
+      <text x="50" y="50" fill="black">
+        Draw a rect here!
+      </text>
+    </svg>
+  );
+};
diff --git a/viz/SvgRectangle/index.js b/exercise/SvgRectanglePractice/index.js
similarity index 100%
rename from viz/SvgRectangle/index.js
rename to exercise/SvgRectanglePractice/index.js
diff --git a/viz/SvgText/package.json b/exercise/SvgRectanglePractice/package.json
similarity index 100%
rename from viz/SvgText/package.json
rename to exercise/SvgRectanglePractice/package.json
diff --git a/viz/SvgRectangle/SvgRectangle.tsx b/exercise/SvgRectangleSolution/SvgRectangle.tsx
similarity index 100%
rename from viz/SvgRectangle/SvgRectangle.tsx
rename to exercise/SvgRectangleSolution/SvgRectangle.tsx
diff --git a/exercise/SvgRectangleSolution/index.js b/exercise/SvgRectangleSolution/index.js
new file mode 100644
index 00000000..af913339
--- /dev/null
+++ b/exercise/SvgRectangleSolution/index.js
@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { SvgRectangle } from './SvgRectangle';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<SvgRectangle />, rootElement);
diff --git a/exercise/SvgRectangleSolution/package.json b/exercise/SvgRectangleSolution/package.json
new file mode 100644
index 00000000..ac08117a
--- /dev/null
+++ b/exercise/SvgRectangleSolution/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/exercise/SvgTextPractice/SvgText.tsx b/exercise/SvgTextPractice/SvgText.tsx
new file mode 100644
index 00000000..b125e8ce
--- /dev/null
+++ b/exercise/SvgTextPractice/SvgText.tsx
@@ -0,0 +1,3 @@
+export const SvgText = () => {
+  return <svg width={500} height={300}></svg>;
+};
diff --git a/viz/SvgText/index.js b/exercise/SvgTextPractice/index.js
similarity index 100%
rename from viz/SvgText/index.js
rename to exercise/SvgTextPractice/index.js
diff --git a/exercise/SvgTextPractice/package.json b/exercise/SvgTextPractice/package.json
new file mode 100644
index 00000000..ac08117a
--- /dev/null
+++ b/exercise/SvgTextPractice/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/viz/SvgText/SvgText.tsx b/exercise/SvgTextSolution/SvgText.tsx
similarity index 100%
rename from viz/SvgText/SvgText.tsx
rename to exercise/SvgTextSolution/SvgText.tsx
diff --git a/exercise/SvgTextSolution/index.js b/exercise/SvgTextSolution/index.js
new file mode 100644
index 00000000..390bb151
--- /dev/null
+++ b/exercise/SvgTextSolution/index.js
@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { SvgText } from './SvgText';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<SvgText />, rootElement);
diff --git a/exercise/SvgTextSolution/package.json b/exercise/SvgTextSolution/package.json
new file mode 100644
index 00000000..ac08117a
--- /dev/null
+++ b/exercise/SvgTextSolution/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}