Dashboard commit

package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.54.8",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/App.js

@@ -1,23 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+// import Accordian from "./component/Accordion/Accordian";
+import Dashboard from "./pages/Dashboard/Dashboard";
+// import Home from "./pages/landingPage/Home";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Dashboard />
     </div>
   );
 }

src/component/Accordion/Accordian.js

@@ -0,0 +1,162 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import "./Accordian.scss";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Lock from "@mui/icons-material/Lock";
+import RandomText from "./RandomText";
+import WeekText from "./WeekText";
+
+const Accordian = () => {
+  const [current, setCurrent] = useState(-1);
+
+  const changeState = (panel) => (e, newValue) => {
+    setCurrent(newValue ? panel : -1);
+  };
+  return (
+    <div className="Accordian-container">
+      <div className="main-div">
+        <h1>Dashboard</h1>
+        {/* Rules And Regulations */}
+        <Accordion
+          className="accordian"
+          disableGutters
+          elevation={0}
+          expanded={current === 0}
+          onChange={changeState(0)}
+        >
+          <AccordionSummary
+            id="panel1-header"
+            aria-controls="panel1-content"
+            expandIcon={<ExpandMoreIcon />}
+          >
+            <Typography>
+              <h1>Rules And Regulations of Skills++ 2022</h1>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <RandomText />
+          </AccordionDetails>
+        </Accordion>
+        {/* Week-1 */}
+        <Accordion
+          className="Week_accordian"
+          disableGutters
+          elevation={0}
+          expanded={current === 1}
+          onChange={changeState(1)}
+        >
+          <AccordionSummary
+            id="panel2-header"
+            aria-controls="panel2-content"
+            expandIcon={<ExpandMoreIcon />}
+          >
+            <Typography>
+              <h1>
+                Week 1 -<span>(07/09/2022 - 14/09/2022)</span>
+              </h1>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <WeekText />
+          </AccordionDetails>
+        </Accordion>
+        {/* Week-2 */}
+        <Accordion
+          className="Week_accordian"
+          disableGutters
+          elevation={0}
+          expanded={current === 2}
+          onChange={changeState(2)}
+        >
+          <AccordionSummary
+            id="panel3-header"
+            aria-controls="panel3-content"
+            expandIcon={<ExpandMoreIcon />}
+          >
+            <Typography>
+              <h1>
+                Week 2 -<span>(07/09/2022 - 14/09/2022)</span>
+              </h1>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <WeekText />
+          </AccordionDetails>
+        </Accordion>
+        {/* Week-3 */}
+        <Accordion
+          className="Week_accordian"
+          disableGutters
+          elevation={0}
+          expanded={current === 3}
+          onChange={changeState(3)}
+        >
+          <AccordionSummary
+            id="panel4-header"
+            aria-controls="panel4-content"
+            expandIcon={
+              <Lock
+                style={{
+                  color: "white",
+                  backgroundColor: "rgb(169, 169, 169)",
+                  borderRadius: "50%",
+                  padding: "3px",
+                }}
+              />
+            }
+            // disabled
+          >
+            <Typography>
+              <h1>
+                Week 3 -<span>(07/09/2022 - 14/09/2022)</span>
+              </h1>
+            </Typography>
+          </AccordionSummary>
+          {/* <AccordionDetails>
+            <WeekText />
+          </AccordionDetails> */}
+        </Accordion>
+        {/* Week-4 */}
+        <Accordion
+          className="Week_accordian"
+          disableGutters
+          elevation={0}
+          expanded={current === 4}
+          onChange={changeState(4)}
+        >
+          <AccordionSummary
+            id="panel5-header"
+            aria-controls="panel5-content"
+            expandIcon={
+              <Lock
+                style={{
+                  color: "white",
+                  backgroundColor: "rgb(169, 169, 169)",
+                  borderRadius: "50%",
+                  padding: "3px",
+                }}
+              />
+            }
+            // disabled
+          >
+            <Typography>
+              <h1>
+                Week 4 -<span>(07/09/2022 - 14/09/2022)</span>
+              </h1>
+            </Typography>
+          </AccordionSummary>
+          {/* <AccordionDetails>
+            <WeekText />
+          </AccordionDetails> */}
+        </Accordion>
+      </div>
+    </div>
+  );
+};
+
+export default Accordian;

src/component/Accordion/Accordian.scss

@@ -0,0 +1,51 @@
+// *{
+//     margin: 0;
+//     padding: 0%;
+//     box-sizing: border-box;
+// }
+
+.Accordian-container{
+    // width: 100%;
+    // height: 100vh;
+    background-color: whitesmoke;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // background-image: linear-gradient(#fcf5f5, #eff4fd);
+}
+.main-div{
+    width: 85vw; 
+    padding: 50px;
+}
+.main-div h1{
+    text-align: center;
+    justify-content: center;
+    padding: 30px;
+}
+.main-div .accordian{
+    border-radius: 0.8rem;
+    height: fit-content;
+}
+.accordian h1{
+    font-size: 1.4rem;
+    text-align: center;
+    align-items: center;
+}
+.accordian p{
+    font-size: 0.9rem;
+}
+.Week_accordian{
+    height: fit-content;
+}
+.Week_accordian h1{
+    font-size: 1rem;
+    font-weight: 900;
+}
+.Week_accordian h1>span{
+    font-weight: 500;
+    color: gray;
+}
+// .Week_accordian p{
+//     font-weight: 500;
+//     color: rgb(105, 105, 105);
+// }

src/component/Accordion/RandomText.js

@@ -0,0 +1,52 @@
+// import { Typography } from "@mui/material";
+// const RandomText = () => {
+//   <Typography variant="p">
+//     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+//     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+//     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+//   </Typography>;
+// };
+
+// export default RandomText;
+
+import React from "react";
+
+const RandomText = () => {
+  return (
+    <div>
+      <ul>
+        <p>
+          1. Participants Must Go through the pdf and resources carefully, which
+          will be provided and should follow them in order to start and comple
+          this Upskilling Program with ease.
+        </p>
+        <p>
+          2. Participants should be careful of the timescale and deadlines of
+          each task. i.e., they should always be prepared with their task before
+          the deadline and submit them in the link provided on the website .
+        </p>
+        <p>
+          3. There is a grading system for the submission of task :- i) If
+          Submitted before the deadline , grading will be done from 100. ii) If
+          Submitted one day after , grading will be done from 70. iii) If
+          Submitted 2 days after , grading will be done from 40. After that ,
+          the link will be closed for that particular task.
+        </p>
+        <p>
+          4. If a participant fails to submit his work on time or his submission
+          gets disqualified by the mentors , then he must focus on following
+          week's tasks . We will provide Certificates and perks after
+          calculating the whole 4 weeks' result. You will be getting enough time
+          to improve, show , try to be consistent throughout the program.
+        </p>
+        <p>
+          5. And the most important thing , participants will get only one
+          chance to submit there task in the link provided on the website. So ,
+          make sure you submit the correct task.
+        </p>
+      </ul>
+    </div>
+  );
+};
+
+export default RandomText;