Dashboard showoff

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)
 

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,9 +81,8 @@ export default function Home() {
 
       <Sponsors sponsors={sponsorsData} />
       <Courses />
-     { /*<ProgressCheck />
-      <ChapterContent />
-      <TechGuru/>*/}
+
+      <DashboardShowoff />
 
       <Features />
       <Approach />

src/components/chapter-content-show.jsx

@@ -31,10 +31,12 @@ 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
-        px="3rem"
+        // px="3rem"
         position="sticky"
         bg="white"
         top="56px"
@@ -71,15 +73,15 @@ const ChapterContent = ({ content, index }) => {
               as={Button}
               rightIcon={<ChevronDownIcon />}
             >
-              Variables
+              Getting Setup & Basics
             </MenuButton>
             <MenuList color="primary">
               <MenuItem
                 color="blue.600"
                 as="a"
                 textDecoration="none !important"
               >
-                lesson 1
+                Lesson 1: Getting Setup & Basics
               </MenuItem>
             </MenuList>
           </Menu>
@@ -98,15 +100,21 @@ const ChapterContent = ({ content, index }) => {
       <Heading
         className="heading"
         fontWeight="500"
-        px="3rem"
+        // px="3rem"
         mb="10px"
         fontSize="3xl"
         color="primary"
         mt="1rem"
       >
         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"
@@ -120,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={{
@@ -140,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 />
@@ -171,7 +183,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.

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="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>
+          <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;

src/components/progress-check-show-off.jsx

@@ -12,16 +12,18 @@ 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);
   const [answeredQuestions, setAnsweredQuestions] = useState([]);
+  const [hasCopied, setHasCopied] = useState({});
   const toast = useToast();
 
   const handleAnswer = (isCorrect) => {
@@ -75,14 +77,17 @@ 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 />
-        <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}>
@@ -91,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 />
@@ -128,7 +135,7 @@ function Chapter() {
                         );
                       },
                     }}
-                  />
+                  >{question.question}</ReactMarkdown>
                 </Box>
                 <Text
                   mb="10px"
@@ -171,7 +178,7 @@ function Chapter() {
                               ];
                             });
                           }}
-                          style={{ display: 'none' }} 
+                          style={{ display: "none" }}
                         />
                         <label
                           htmlFor={`radio-${option._id}`}
@@ -189,8 +196,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 +222,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>