Merge pull request #25 from Tusharbecoding/main

added github contribution card
ACM-Thapar · Oct 2, 2022 · f09c470 · f09c470
2 parents 7d82ce3 + 33de4d8
commit f09c470
Show file tree

Hide file tree

Showing 21 changed files with 19,392 additions and 53 deletions.
diff --git a/acm-member-dashboard/package.json b/acm-member-dashboard/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dashboard",
   "version": "0.1.0",
-  "proxy": "http://127.0.0.1:5000/",
+  "proxy": "http://ec2-13-233-96-1.ap-south-1.compute.amazonaws.com:5000/",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",
@@ -28,11 +28,12 @@
     "react-github-cards": "^1.1.1",
     "react-github-contributions-component": "^0.2.0",
     "react-icons": "^4.4.0",
-    "react-parallax-tilt": "^1.7.61",
+    "react-parallax-tilt": "^1.7.63",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-social-icons": "^5.14.0",
+    "react-ui-cards": "^3.0.0",
     "sass": "^1.54.4",
     "web-vitals": "^2.1.0"
   },

diff --git a/acm-member-dashboard/src/App.js b/acm-member-dashboard/src/App.js
@@ -8,17 +8,17 @@ import Logins from './pages/login/Login';
 import Badges from './pages/badges/Badges'
 
 import { Outlet } from 'react-router';
-
 import React from 'react'
 import Calendar from './pages/calendar/Calendar';
 import Announcements from './pages/announcements/Announcements';
 
+import Certificates from './pages/certificates/Certificates';
+
 function Nav() {
   return (
     <div> 
       <div className="App">
       <div className="AppGlass">
-
       <Sidebar/><Outlet/><RightSide/> 
       </div>
       </div>
@@ -35,6 +35,8 @@ function App() {
           <Route exact path="/login" element={<Logins/>}  />
           <Route element={<Nav/>} >
             <Route path='/' element={<MainDash/>} exact />
+            <Route path='/calendar' element={<Calendar/>} />
+            <Route path='/certificates' element={<Certificates/>} />
             <Route path="/badges" element={<Badges />}  />
             <Route path="/announcements" element={<Announcements />}  />
           </Route>

diff --git a/acm-member-dashboard/src/Data/Data.js b/acm-member-dashboard/src/Data/Data.js
@@ -19,6 +19,7 @@ import {
 
 // Recent Card Imports
 import img1 from "../imgs/Rectangle2.png";
+import avatar from "../imgs/Rectangle2.png";
 //import img2 from "../imgs/img2.png";
 //import img3 from "../imgs/img3.png";
 import banner1 from "../imgs/banner1.jpg";
@@ -28,29 +29,36 @@ export const SidebarData = [
   {
     icon: UilEstate,
     heading: "Dashboard",
+    link: "/",
   },
   {
     icon: UilClipboardAlt,
     heading: "Projects",
+    link: "/projects",
   },
   {
     icon: UilUsersAlt,
     heading: "Announcements",
+    link: "/announcements",
   },
 
   {
     icon: UilChart,
-    heading: "Achievements",
+    heading: 'Certificates',
+    link: "/certificates",
   },
 
   {
     icon: UilMedal,
-    heading: "Badges",
+    heading: 'Badges',
+    link: "/badges",
   },
   {
     icon: UilCalender,
-    heading: "Calendar",
+    heading: 'Calendar',
+    link: "/calendar",
   },
+
   // {
   //   icon: UilMobileAndroid,
   //   heading: 'Web Development'
@@ -192,3 +200,11 @@ export const UpdatesData = [
       "I am a budding programmer with a knack for coding. Data Science is my passion and Web Development along with UI/UX designing my hobby. I have beginner to intermediate level knowledge in Python, JavaScript, HTML, CSS, React.js, MySQL, Node.js, Figma and some video editing too.",
   },
 ];
+
+export const CertificatesData = [
+  {
+    url: 'www.acmthapar.com',
+    img: avatar,
+    title: "Web Development",
+  }
+]
diff --git a/acm-member-dashboard/src/components/FourCard/FourCard.css b/acm-member-dashboard/src/components/FourCard/FourCard.css
@@ -27,7 +27,7 @@
 .CircularProgressbar-path {
   stroke: #7FA8E5 !important;
   stroke-width: 12px !important;
-  filter: drop-shadow(2px 4px 6px #7FA8E5);
+
 }
 .CircularProgressbar-trail {
   display: none;

diff --git a/acm-member-dashboard/src/components/FourCard/FourCard.jsx b/acm-member-dashboard/src/components/FourCard/FourCard.jsx
@@ -36,8 +36,8 @@ function CompactCard({ param, setExpanded }) {
     >
       <div className="radialBar">
         <CircularProgressbar
-          value={param.barValue}
-          text={`${param.barValue}%`}
+          value={100}
+          text={`${param.barValue}`}
         />
         <span>{param.title}</span>
       </div>

diff --git a/acm-member-dashboard/src/components/FourCards/FourCards.jsx b/acm-member-dashboard/src/components/FourCards/FourCards.jsx
@@ -23,12 +23,6 @@ const FourCards = ({ dashData }) => {
                 barValue={card.count}
                 value={card.value}
                 png={UilUsdSquare}
-                series={[
-                  {
-                    name: "Expenses",
-                    data: [10, 25, 15, 30, 12, 15, 20],
-                  },
-                ]}
               />
             </div>
           );

diff --git a/acm-member-dashboard/src/components/RigtSide/RightSide.css b/acm-member-dashboard/src/components/RigtSide/RightSide.css
@@ -16,7 +16,7 @@
 .medium-theme .repo-card .header{
     background: black !important;
     border-radius: 10px 10px 0px 0px;  
-    width: 100%; 
+    width: 90%; 
 }
 
 .medium-theme .github-card .content .description{
@@ -25,7 +25,7 @@
 
 .medium-theme .github-card{
     border-radius: 10px;
-    width: 97% ;
+    width: 100%;
 }
 
 .medium-theme .github-card ul{

diff --git a/acm-member-dashboard/src/components/RigtSide/RightSide.jsx b/acm-member-dashboard/src/components/RigtSide/RightSide.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Updates from "../Updates/Updates";
-// import { RepoCard } from 'react-github-cards/dist/medium';
-import "react-github-cards/dist/medium.css";
+import { RepoCard } from 'react-github-cards/dist/medium';
+import 'react-github-cards/dist/medium.css';
 import "./RightSide.css";
 import Cookies from "js-cookie";
 // <RepoCard username="ACM-Thapar" repo="CS_COURSE_GUIDE" />
@@ -13,7 +13,7 @@ const RightSide = () => {
           <Updates />
         </div>
         <div className="csCourse">
-          {/* <RepoCard username="ACM-Thapar" repo="CS_COURSE_GUIDE" /> */}
+        <RepoCard username="ACM-Thapar" repo="CS_COURSE_GUIDE" />
         </div>
       </div>
     </>

diff --git a/acm-member-dashboard/src/components/Sidebar.jsx b/acm-member-dashboard/src/components/Sidebar.jsx
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import "./Sidebar.css";
 import Logo from "../imgs/logo.png";
-import { UilSignOutAlt } from "@iconscout/react-unicons";
+import { UilSignOutAlt, UilUser  } from "@iconscout/react-unicons";
 import { SidebarData } from "../Data/Data";
 import { UilBars } from "@iconscout/react-unicons";
 import { motion } from "framer-motion";
 import Cookies from "js-cookie";
 import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 const Sidebar = () => {
   const [expanded, setExpaned] = useState(true);
@@ -37,33 +38,38 @@ const Sidebar = () => {
       >
         {/* logo */}
 
-        <div className="menu">
-          {SidebarData.map((item, index) => {
-            return (
-              <div
-                className={selected === index ? "menuItem active" : "menuItem"}
-                key={index}
-                onClick={() => setSelected(index)}
-              >
-                <item.icon className="icon" />
-                <span>{item.heading}</span>
-              </div>
-            );
-          })}
-          {/* signoutIcon */}
-          <div style={{ border: "0.1px solid #3D70B2" }}></div>
-          {user.bootcamps.map((item, index) => {
-            return (
-              <div className="menuItem" key={index}>
-                <UilSignOutAlt className="icon" />
-                <span>{item}</span>
-              </div>
-            );
-          })}
-          <div className="menuItem">
-            <UilSignOutAlt className="icon" />
-          </div>
+      <motion.div className="menu">
+        {SidebarData.map((item, index) => {
+          return (
+            <div
+            className={selected === index ? "menuItem active" : "menuItem"}
+              key={index}
+              onClick={() => setSelected(index)}
+            >
+              <item.icon className="icon" />
+              <span ><Link to={item.link} style={{fontSize: '14px'}}>{item.heading}</Link></span>
+
+            </div>
+          );
+        })}
+        <div className="admin  menuItem">
+        <UilUser />
+        <span>Admin</span>
         </div>
+        {/* signoutIcon */}
+        <div style={{border: '0.1px solid #3D70B2',}}></div>
+        {user.bootcamps.map((item, index)=>{
+          return(
+            <div className="menuItem" key={index}>
+              <UilSignOutAlt className="icon" />
+              <span>{item}</span>
+            </div>
+          )
+        })}
+        <div className="menuItem">
+          <UilSignOutAlt className="icon"/>
+        </div>
+      </motion.div>
       </motion.div>
     </>
   );

diff --git a/acm-member-dashboard/src/components/TwoCard/TwoCard.css b/acm-member-dashboard/src/components/TwoCard/TwoCard.css
@@ -0,0 +1,106 @@
+.CompactCard {
+    display: flex;
+    flex: 1;
+    height: 7rem !important;
+    border-radius: 0.7rem;
+    color: #7FA8E5;
+    padding: 1rem;
+    position: relative;
+    cursor: pointer;
+  }
+  .CompactCard:hover {
+    box-shadow: none !important;
+  }
+
+  /* radial bar */
+  .radialBar {
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 1rem;
+  }
+  .CircularProgressbar {
+    width: 4rem !important;
+    overflow: visible;
+  }
+  .CircularProgressbar-path {
+    stroke: #7FA8E5 !important;
+    stroke-width: 12px !important;
+    filter: none;
+  }
+  .CircularProgressbar-trail {
+    display: none;
+  }
+  .CircularProgressbar-text {
+    fill: #7FA8E5 !important;
+  }
+
+  .radialBar > span {
+    font-size: 17px;
+    font-weight: bold;
+  }
+
+  /* sideDetail*/
+  .detail {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  .detail > span:nth-child(2) {
+    font-size: 22px;
+    font-weight: bold;
+  }
+  .detail > span:nth-child(3) {
+    font-size: 12px;
+  }
+
+  /* ExpandedCard */
+  .ExpandedCard {
+    position: absolute;
+    width: 60%;
+    height: 70vh;
+    z-index: 9;
+    left: 13rem;
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding: 1rem;
+  }
+  .ExpandedCard > span:nth-of-type(1) {
+    color: white;
+    font-size: 26px;
+    font-weight: bold;
+    text-shadow: 0px 0px 15px white;
+  }
+  .ExpandedCard > span:nth-of-type(2) {
+    color: rgb(236, 236, 236);
+    font-size: 15px;
+  }
+
+  .chartContainer {
+    width: 70%;
+  }
+
+  @media screen and (max-width: 1200px) {
+    .ExpandedCard {
+      top: 2rem;
+      height: 45vh;
+      left: 6rem;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .ExpandedCard {
+      top: 8rem;
+      height: 50%;
+      left: 25px;
+      width: 80%;
+    }
+  }
+