From f812db741b14bfa750980441d2a36fe011818b0f Mon Sep 17 00:00:00 2001
From: Taptaplit Patel <pateltaptaplit@gmail.com>
Date: Tue, 28 Nov 2023 23:16:10 -0500
Subject: [PATCH 1/5] refurbised dashboard comp

---
 package-lock.json                          | 37 ++++++++++++++++++++++
 src/app/page.js                            | 14 ++++++--
 src/components/chapter-content-show.jsx    | 21 +++++++++---
 src/components/progress-check-show-off.jsx | 26 +++++++++------
 src/components/tech-guru-show-off.jsx      | 20 ++++++++----
 5 files changed, 95 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5c4cf7f..a417c4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3889,10 +3889,28 @@
       "version": "0.16.3",
       "license": "MIT"
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "peer": true
+    },
     "node_modules/@types/stylis": {
       "version": "4.2.0",
       "license": "MIT"
     },
+    "node_modules/@types/three": {
+      "version": "0.158.3",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.158.3.tgz",
+      "integrity": "sha512-6Qs1rUvLSbkJ4hlIe6/rdwIf61j1x2UKvGJg7s8KjswYsz1C1qDTs6voVXXB8kYaI0hgklgZgbZUupfL1l9xdA==",
+      "peer": true,
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "license": "MIT"
@@ -7367,6 +7385,12 @@
         "three": ">=0.137"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "peer": true
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "license": "MIT",
@@ -9985,6 +10009,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "license": "MIT",
diff --git a/src/app/page.js b/src/app/page.js
index 0a87816..55182b7 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -82,9 +82,17 @@ export default function Home() {
 
       <Sponsors sponsors={sponsorsData} />
       <Courses />
-     { /*<ProgressCheck />
-      <ChapterContent />
-      <TechGuru/>*/}
+      <Box  pt="1rem"
+        mt={["0rem", "4rem"]}
+        maxW="1070px"
+        mx="auto"
+        direction={"column"} width="100%" display="flex" justifyContent="start" alignItems="center">
+        <Box>
+          <ProgressCheck />
+          <ChapterContent />
+          <TechGuru/> 
+        </Box>
+      </Box>
     
       <Features />
       <Approach />
diff --git a/src/components/chapter-content-show.jsx b/src/components/chapter-content-show.jsx
index 22a3d52..605640e 100644
--- a/src/components/chapter-content-show.jsx
+++ b/src/components/chapter-content-show.jsx
@@ -34,7 +34,7 @@ const ChapterContent = ({ content, index }) => {
   return (
     <Flex my="10px" direction="column">
       <Box
-        px="3rem"
+        // px="3rem"
         position="sticky"
         bg="white"
         top="56px"
@@ -79,7 +79,7 @@ const ChapterContent = ({ content, index }) => {
                 as="a"
                 textDecoration="none !important"
               >
-                lesson 1
+                Lesson 1
               </MenuItem>
             </MenuList>
           </Menu>
@@ -98,7 +98,7 @@ const ChapterContent = ({ content, index }) => {
       <Heading
         className="heading"
         fontWeight="500"
-        px="3rem"
+        // px="3rem"
         mb="10px"
         fontSize="3xl"
         color="primary"
@@ -106,7 +106,13 @@ const ChapterContent = ({ content, index }) => {
       >
         Lesson 1: Getting Setup & Basics
       </Heading>
-      <AspectRatio my="1rem" ml="3rem" maxW={`90%`} ratio={16 / 9}>
+      <AspectRatio
+        my="1rem"
+        // ml="3rem"
+        // maxW={`90%`}
+        maxW={`98%`}
+        ratio={16 / 9}
+      >
         <iframe
           src="https://www.youtube.com/embed/RQzB6oRgi2g?si=aMPvGOByXVSPy_8H"
           title="Intro to Javascript Lesson 1"
@@ -171,7 +177,12 @@ const ChapterContent = ({ content, index }) => {
 
 const ChapterPreview = () => {
   return (
-    <Flex width="700px" flexDirection="column" mx="auto" my={5}>
+    <Flex
+      // width="700px"
+      flexDirection="column"
+      mx="auto"
+      my={5}
+    >
       <ChapterContent
         index={6}
         content={`JavaScript is a versatile, high-level programming language that is primarily used for adding interactive features to websites. It's one of the core technologies of the web, alongside HTML and CSS. Despite its name, it's unrelated to Java.
diff --git a/src/components/progress-check-show-off.jsx b/src/components/progress-check-show-off.jsx
index b3d1a4f..059b910 100644
--- a/src/components/progress-check-show-off.jsx
+++ b/src/components/progress-check-show-off.jsx
@@ -12,12 +12,13 @@ import {
   Text,
   IconButton,
   useToast,
+  ModalCloseButton,
 } from "@chakra-ui/react";
 import { BsSend } from "react-icons/bs";
 import ReactMarkdown from "react-markdown";
 import { Prism } from "react-syntax-highlighter";
 import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
-import { useClipboard } from "@chakra-ui/react";
+import { useClipboard, Flex } from "@chakra-ui/react";
 
 function Chapter() {
   const [showQuestions, setShowQuestions] = useState(false);
@@ -79,10 +80,13 @@ function Chapter() {
       </Button>
       <Modal isOpen={showQuestions} onClose={() => setShowQuestions(false)}>
         <ModalOverlay />
-        <ModalContent mx="2rem" bg="fourth" color="black" bg="white">
-          <ModalHeader pb="0" color="primary">
-            Intro to Javascript Questions
-          </ModalHeader>
+        <ModalContent mx="2rem" color="black" bg="white">
+          <Flex pb="0" justifyContent="space-between" alignItems="center">
+            <ModalHeader color="primary" whiteSpace="nowrap">
+              Intro to Javascript Questions
+            </ModalHeader>
+            <ModalCloseButton mt="8px"></ModalCloseButton>
+          </Flex>
           <ModalBody>
             {mockQuestions.map((question, questionIndex) => (
               <div key={question._id}>
@@ -171,7 +175,7 @@ function Chapter() {
                               ];
                             });
                           }}
-                          style={{ display: 'none' }} 
+                          style={{ display: "none" }}
                         />
                         <label
                           htmlFor={`radio-${option._id}`}
@@ -189,8 +193,12 @@ function Chapter() {
                             backgroundColor: "transparent",
                             padding: "14px",
                           }}
-                          onMouseOver={(e) => e.currentTarget.style.backgroundColor = "#e2e4e7"} // Darken the background on hover
-                          onMouseOut={(e) => e.currentTarget.style.backgroundColor = "#f2f4f7"} // Reset the background color
+                          onMouseOver={(e) =>
+                            (e.currentTarget.style.backgroundColor = "#e2e4e7")
+                          } // Darken the background on hover
+                          onMouseOut={(e) =>
+                            (e.currentTarget.style.backgroundColor = "#f2f4f7")
+                          } // Reset the background color
                         >
                           {String.fromCharCode(65 + index)}
                         </label>
@@ -211,7 +219,7 @@ function Chapter() {
           </ModalBody>
           <ModalFooter>
             <Text fontSize="sm" color="tertiary" mr="auto">
-               This progress check is a demo.
+              This progress check is a demo.
             </Text>
           </ModalFooter>
         </ModalContent>
diff --git a/src/components/tech-guru-show-off.jsx b/src/components/tech-guru-show-off.jsx
index fb7113e..b3fca71 100644
--- a/src/components/tech-guru-show-off.jsx
+++ b/src/components/tech-guru-show-off.jsx
@@ -68,12 +68,12 @@ const UserMessage = ({ message, user, index }) => {
       >
         <Box
           borderBottomRightRadius={"0px !important"}
-          border="1px"
+          border="2px"
           borderColor="green.300"
           px="8px"
           py="4px"
           borderRadius="lg"
-          boxShadow="0 3.5px 16px 0px rgba(46, 182, 125, 0.5), 0 2px 4px -1px rgba(46, 182, 125, 0.1)"
+          // boxShadow="0 3.5px 16px 0px rgba(46, 182, 125, 0.5), 0 2px 4px -1px rgba(46, 182, 125, 0.1)"
         >
           <Text>{message}</Text>
         </Box>
@@ -103,20 +103,20 @@ const GuruMessage = ({ message, index }) => {
         <Flex mr=".9rem" my="10px" alignItems="flex-end">
           <Box pb="2px">
             <Image
-            minW="35px"
+              minW="35px"
               src="/glyph-black-transparent.png"
               width="30px !important"
               alt="Guru Icon"
             />
           </Box>
           <Box
-            border="1px"
+            border="2px"
             borderColor="blue.300"
             mr="2rem"
             px="8px"
             borderBottomLeftRadius={"0px !important"}
             borderRadius="lg"
-            boxShadow="0 3.5px 16px 0px rgba(66, 153, 225, 0.5), 0 2px 4px -1px rgba(66, 153, 225, 0.1)"
+            // boxShadow="0 3.5px 16px 0px rgba(66, 153, 225, 0.5), 0 2px 4px -1px rgba(66, 153, 225, 0.1)"
           >
             <Box px="10px" className="chapter-content">
               <ReactMarkdown
@@ -191,7 +191,15 @@ const TechGuruFeature = () => {
   };
 
   return (
-    <Flex width="500px" flexDirection="column" mx="auto" my={5}>
+    <Flex
+      // width="500px"
+      flexDirection="column"
+      mx="auto"
+      my={5}
+      pb="3rem"
+      mb="2rem"
+      borderBottom="1px solid #eaeaea"
+    >
       <VStack alignItems="stretch" spacing={3}>
         <Box
           pt=".5rem"

From 14c68597fbbf5ab3af31dc442a3d24beed92bd87 Mon Sep 17 00:00:00 2001
From: Siddharth <96356209+siddharthd0@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:56:24 -0600
Subject: [PATCH 2/5] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1acbd9f..3928190 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <p align="center"><img width="300" alt="Tech Optimum Logo" src="https://www.techoptimum.org/logo-transparent.png"></p>
 <h1 align="center"><a href="https://techoptimum.org">Tech Optimum</a></h1>
 
-[**Our Learning Platform**](https://dashboard.techoptimum.org)
+[**Learning Platform**](https://dashboard.techoptimum.org)
 
 Welcome to Tech Optimum, a nonprofit organization dedicated to helping students in computer science through accessible coding courses, publicizing internships for students, tech talks and more. If you are interested in joining our community, join [here](https://techoptimum.org/discord). If you would like to contribute to our repositories or join Tech Optimum as a staff member, please go [here.](https://techoptimum.org/join-team)
 

From 08560f3710a2afbcceb986b8201c1df2089b7ae5 Mon Sep 17 00:00:00 2001
From: Taptaplit Patel <pateltaptaplit@gmail.com>
Date: Sat, 2 Dec 2023 14:46:22 -0500
Subject: [PATCH 3/5] fixed build errors

---
 src/components/chapter-content-show.jsx    | 16 +++++++++++-----
 src/components/progress-check-show-off.jsx | 17 ++++++++++-------
 src/components/tech-guru-show-off.jsx      | 14 +++++++++-----
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/chapter-content-show.jsx b/src/components/chapter-content-show.jsx
index 605640e..862b35e 100644
--- a/src/components/chapter-content-show.jsx
+++ b/src/components/chapter-content-show.jsx
@@ -31,6 +31,8 @@ import ReactMarkdown from "react-markdown";
 import style from "@/styles/react-highlighter";
 
 const ChapterContent = ({ content, index }) => {
+  const [hasCopied, setHasCopied] = useState({});
+
   return (
     <Flex my="10px" direction="column">
       <Box
@@ -126,17 +128,17 @@ const ChapterContent = ({ content, index }) => {
               code({ node, inline, className, children, ...props }) {
                 const match = /language-(\w+)/.exec(className || "");
                 const textToCopy = String(children).replace(/\n$/, "");
-                const { hasCopied, onCopy } = useClipboard(textToCopy);
+                // const { hasCopied, onCopy } = useClipboard(textToCopy);
+                setHasCopied({...hasCopied, [textToCopy]: false})
 
                 return !inline && match ? (
                   <Box position="relative">
                     <Prism
                       {...props}
-                      children={textToCopy}
                       style={style}
                       language={match[1]}
                       PreTag="div"
-                    />
+                    >{textToCopy}</Prism>
                     <Box position="absolute" top="5px" right="6px">
                       <IconButton
                         _hover={{
@@ -146,10 +148,14 @@ const ChapterContent = ({ content, index }) => {
                         border="none"
                         background="none"
                         color="whiteAlpha.900"
-                        onClick={onCopy}
+                        onClick={() => {
+                          navigator.clipboard.writeText(textToCopy).then(() => {
+                            setHasCopied({...hasCopied, [textToCopy]: true})
+                          });
+                        }}
                         aria-label="Copy to clipboard"
                         icon={
-                          hasCopied ? (
+                          hasCopied[textToCopy] ? (
                             <CheckIcon color="rgb(67, 155, 255)" />
                           ) : (
                             <CopyIcon />
diff --git a/src/components/progress-check-show-off.jsx b/src/components/progress-check-show-off.jsx
index 059b910..ed94100 100644
--- a/src/components/progress-check-show-off.jsx
+++ b/src/components/progress-check-show-off.jsx
@@ -23,6 +23,7 @@ import { useClipboard, Flex } from "@chakra-ui/react";
 function Chapter() {
   const [showQuestions, setShowQuestions] = useState(false);
   const [answeredQuestions, setAnsweredQuestions] = useState([]);
+  const [hasCopied, setHasCopied] = useState({});
   const toast = useToast();
 
   const handleAnswer = (isCorrect) => {
@@ -95,30 +96,32 @@ function Chapter() {
                     questionIndex + 1
                   }`}</Badge>
                   <ReactMarkdown
-                    children={question.question}
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         const match = /language-(\w+)/.exec(className || "");
                         const textToCopy = String(children).replace(/\n$/, "");
-                        const { hasCopied, onCopy } = useClipboard(textToCopy);
+                        setHasCopied({...hasCopied, [textToCopy]: false})
 
                         return !inline && match ? (
                           <Box position="relative">
                             <Prism
                               {...props}
-                              children={textToCopy}
                               language={match[1]}
                               PreTag="div"
-                            />
+                            >{textToCopy}</Prism>
                             <Box position="absolute" top="5px" right="6px">
                               <IconButton
                                 border="none"
                                 background="none"
                                 color="whiteAlpha.900"
-                                onClick={onCopy}
+                                onClick={() => {
+                                  navigator.clipboard.writeText(textToCopy).then(() => {
+                                    setHasCopied({...hasCopied, [textToCopy]: true})
+                                  });
+                                }}
                                 aria-label="Copy to clipboard"
                                 icon={
-                                  hasCopied ? (
+                                  hasCopied[textToCopy] ? (
                                     <CheckIcon color="rgb(67, 155, 255)" />
                                   ) : (
                                     <CopyIcon />
@@ -132,7 +135,7 @@ function Chapter() {
                         );
                       },
                     }}
-                  />
+                  >{question.question}</ReactMarkdown>
                 </Box>
                 <Text
                   mb="10px"
diff --git a/src/components/tech-guru-show-off.jsx b/src/components/tech-guru-show-off.jsx
index b3fca71..1b1cb35 100644
--- a/src/components/tech-guru-show-off.jsx
+++ b/src/components/tech-guru-show-off.jsx
@@ -90,6 +90,7 @@ const GuruMessage = ({ message, index }) => {
     threshold: 0.1,
     triggerOnce: true,
   });
+  const [hasCopied, setHasCopied] = useState({});
 
   return (
     <>
@@ -124,17 +125,16 @@ const GuruMessage = ({ message, index }) => {
                   code({ node, inline, className, children, ...props }) {
                     const match = /language-(\w+)/.exec(className || "");
                     const textToCopy = String(children).replace(/\n$/, "");
-                    const { hasCopied, onCopy } = useClipboard(textToCopy);
+                    setHasCopied({...hasCopied, [textToCopy]: false})
 
                     return !inline && match ? (
                       <Box position="relative">
                         <Prism
                           {...props}
-                          children={textToCopy}
                           style={style}
                           language={match[1]}
                           PreTag="div"
-                        />
+                        >{textToCopy}</Prism>
                         <Box position="absolute" top="5px" right="6px">
                           <IconButton
                             _hover={{
@@ -144,10 +144,14 @@ const GuruMessage = ({ message, index }) => {
                             border="none"
                             background="none"
                             color="whiteAlpha.900"
-                            onClick={onCopy}
+                            onClick={() => {
+                              navigator.clipboard.writeText(textToCopy).then(() => {
+                                setHasCopied({...hasCopied, [textToCopy]: true})
+                              });
+                            }}
                             aria-label="Copy to clipboard"
                             icon={
-                              hasCopied ? (
+                              hasCopied[textToCopy] ? (
                                 <CheckIcon color="rgb(67, 155, 255)" />
                               ) : (
                                 <CopyIcon />

From b84c4ca37121518b0162bb111653ec243daa9774 Mon Sep 17 00:00:00 2001
From: Taptaplit Patel <pateltaptaplit@gmail.com>
Date: Tue, 16 Jan 2024 11:40:09 -0500
Subject: [PATCH 4/5] added tabs for each featuer

---
 src/app/page.js                            | 18 ++------
 src/components/chapter-content-show.jsx    |  4 +-
 src/components/dashboard-showoff.jsx       | 50 ++++++++++++++++++++++
 src/components/progress-check-show-off.jsx |  2 +-
 4 files changed, 57 insertions(+), 17 deletions(-)
 create mode 100644 src/components/dashboard-showoff.jsx

diff --git a/src/app/page.js b/src/app/page.js
index 55182b7..2c7c747 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -8,10 +8,9 @@ import Features from "@/components/features";
 import Approach from "@/components/approach";
 import Popup from "@/components/popup";
 import { Box, Heading } from "@chakra-ui/react";
-import TechGuru from "@/components/tech-guru-show-off";
 import Sponsors from "@/components/sponsors";
-import ProgressCheck from "@/components/progress-check-show-off";
-import ChapterContent from "@/components/chapter-content-show";
+import DashboardShowoff from "@/components/dashboard-showoff";
+
 const sponsorsData = [
   { imagePath: "/sponsors/open-ai.png", link: "https://openai.com" },
   { imagePath: "/sponsors/azure.png", link: "https://azure.microsoft.com" },
@@ -82,17 +81,8 @@ export default function Home() {
 
       <Sponsors sponsors={sponsorsData} />
       <Courses />
-      <Box  pt="1rem"
-        mt={["0rem", "4rem"]}
-        maxW="1070px"
-        mx="auto"
-        direction={"column"} width="100%" display="flex" justifyContent="start" alignItems="center">
-        <Box>
-          <ProgressCheck />
-          <ChapterContent />
-          <TechGuru/> 
-        </Box>
-      </Box>
+      
+      <DashboardShowoff />
     
       <Features />
       <Approach />
diff --git a/src/components/chapter-content-show.jsx b/src/components/chapter-content-show.jsx
index 862b35e..b507c57 100644
--- a/src/components/chapter-content-show.jsx
+++ b/src/components/chapter-content-show.jsx
@@ -73,7 +73,7 @@ const ChapterContent = ({ content, index }) => {
               as={Button}
               rightIcon={<ChevronDownIcon />}
             >
-              Variables
+              Getting Setup & Basics
             </MenuButton>
             <MenuList color="primary">
               <MenuItem
@@ -81,7 +81,7 @@ const ChapterContent = ({ content, index }) => {
                 as="a"
                 textDecoration="none !important"
               >
-                Lesson 1
+                Lesson 1: Getting Setup & Basics
               </MenuItem>
             </MenuList>
           </Menu>
diff --git a/src/components/dashboard-showoff.jsx b/src/components/dashboard-showoff.jsx
new file mode 100644
index 0000000..fd654ed
--- /dev/null
+++ b/src/components/dashboard-showoff.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import ProgressCheck from "@/components/progress-check-show-off";
+import ChapterContent from "@/components/chapter-content-show";
+import TechGuru from "@/components/tech-guru-show-off";
+import { Box, Heading, Text } from "@chakra-ui/react";
+
+function dashboardShowoff() {
+  const [ tab, setTab ] = useState("content");
+  return (
+    <Box
+      pt="1rem"
+      mt={["0rem", "4rem"]}
+      maxW="1070px"
+      mx="auto"
+      direction={"column"}
+      width="100%"
+      display="flex"
+      justifyContent="start"
+      alignItems="center"
+    >
+      <Box>
+        <Heading
+          textAlign={{ base: "center", lg: "left" }}
+          color="primary"
+          fontSize={{ base: "3xl", md: "4xl" }}
+          mb="10px"
+        >
+          Our Dashboard
+        </Heading>
+        <Box display="flex" justifyContent="start"
+        alignItems="center" width="100%" mb="20px">
+          <Text color={tab == "content" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "content" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("content")}>1. Quality Content & Videos</Text>
+          <Text color={tab == "questions" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "questions" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("questions")}>2. Progress Check w/ Questions</Text>
+          <Text color={tab == "ai" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "ai" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("ai")}>3. AI Help (Tech Guru)</Text>
+        </Box>
+        {tab === "content" && (
+          <ChapterContent />
+        )}
+        {tab === "questions" && (
+          <ProgressCheck />
+        )}
+        {tab === "ai" && (
+          <TechGuru />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default dashboardShowoff;
diff --git a/src/components/progress-check-show-off.jsx b/src/components/progress-check-show-off.jsx
index ed94100..cef1414 100644
--- a/src/components/progress-check-show-off.jsx
+++ b/src/components/progress-check-show-off.jsx
@@ -77,7 +77,7 @@ function Chapter() {
   return (
     <Box>
       <Button onClick={() => setShowQuestions(true)}>
-        Intro to Javascript Questions
+        Check here for a progress check
       </Button>
       <Modal isOpen={showQuestions} onClose={() => setShowQuestions(false)}>
         <ModalOverlay />

From 70a12bafef7809dc8f42bd3f70926f4b38aa50a0 Mon Sep 17 00:00:00 2001
From: Taptaplit Patel <pateltaptaplit@gmail.com>
Date: Fri, 16 Feb 2024 17:58:46 -0500
Subject: [PATCH 5/5] added centered tabs

---
 src/components/dashboard-showoff.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard-showoff.jsx b/src/components/dashboard-showoff.jsx
index fd654ed..e4afd06 100644
--- a/src/components/dashboard-showoff.jsx
+++ b/src/components/dashboard-showoff.jsx
@@ -27,7 +27,7 @@ function dashboardShowoff() {
         >
           Our Dashboard
         </Heading>
-        <Box display="flex" justifyContent="start"
+        <Box display="flex" justifyContent="center"
         alignItems="center" width="100%" mb="20px">
           <Text color={tab == "content" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "content" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("content")}>1. Quality Content & Videos</Text>
           <Text color={tab == "questions" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "questions" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("questions")}>2. Progress Check w/ Questions</Text>