fix top breadcrumb

holtzy · Aug 8, 2024 · acd143f · acd143f
1 parent b96da40
commit acd143f
Show file tree

Hide file tree

Showing 19 changed files with 166 additions and 25 deletions.
diff --git 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
@@ -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 → exercise/SvgLinePractice/index.js b/viz/SvgLine/index.js → exercise/SvgLinePractice/index.js
diff --git a/viz/SvgLine/package.json → exercise/SvgLinePractice/package.json b/viz/SvgLine/package.json → exercise/SvgLinePractice/package.json
diff --git a/viz/SvgLine/SvgLine.tsx → exercise/SvgLineSolution/SvgLine.tsx b/viz/SvgLine/SvgLine.tsx → exercise/SvgLineSolution/SvgLine.tsx
diff --git a/exercise/SvgLineSolution/index.js 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 → exercise/SvgLineSolution/package.json b/viz/SvgRectangle/package.json → exercise/SvgLineSolution/package.json
diff --git a/exercise/SvgRectanglePractice/SvgRectangle.tsx 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 → exercise/SvgRectanglePractice/index.js b/viz/SvgRectangle/index.js → exercise/SvgRectanglePractice/index.js
diff --git a/viz/SvgText/package.json → exercise/SvgRectanglePractice/package.json b/viz/SvgText/package.json → exercise/SvgRectanglePractice/package.json
diff --git a/viz/SvgRectangle/SvgRectangle.tsx → ...ise/SvgRectangleSolution/SvgRectangle.tsx b/viz/SvgRectangle/SvgRectangle.tsx → ...ise/SvgRectangleSolution/SvgRectangle.tsx
diff --git a/exercise/SvgRectangleSolution/index.js 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
@@ -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
@@ -0,0 +1,3 @@
+export const SvgText = () => {
+  return <svg width={500} height={300}></svg>;
+};
diff --git a/viz/SvgText/index.js → exercise/SvgTextPractice/index.js b/viz/SvgText/index.js → exercise/SvgTextPractice/index.js
diff --git a/exercise/SvgTextPractice/package.json 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 → exercise/SvgTextSolution/SvgText.tsx b/viz/SvgText/SvgText.tsx → exercise/SvgTextSolution/SvgText.tsx
diff --git a/exercise/SvgTextSolution/index.js 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
@@ -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"
+  ]
+}