feat(frontend): typescript added and minor bug fix

Author: Aksh-Bansal-dev

frontend/.prettierrc.js

@@ -3,4 +3,4 @@ module.exports = {
   tabWidth: 2,
   semi: true,
   singleQuote: false,
-};
+};

frontend/package-lock.json

@@ -9,7 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^4.0.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

frontend/package.json

@@ -1,6 +1,6 @@
 import "./App.css";
 import React from "react";
-import HomePage from "./components/homePage";
+import HomePage from "./pages/homePage";
 import Nav from "./components/nav";
 import { Route, Switch } from "react-router-dom";
 

frontend/src/App.test.js frontend/src/App.test.tsxfrontend/src/App.test.js renamed to frontend/src/App.test.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import styles from "./style.module.css";
 
-function AboutUs() {
+const AboutUs: React.FC = () => {
   return (
     <div id="about" className={styles.container}>
       <div className={styles.content}>
@@ -37,6 +38,6 @@ function AboutUs() {
       </div>
     </div>
   );
-}
+};
 
 export default AboutUs;

frontend/src/Routes.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styles from "./style.module.css";
 import NavLinks from "../navLinks";
 
-function HomeNav() {
+const HomeNav: React.FC = () => {
   return (
     <div className={styles.container}>
       <div className={styles.buttons}>
@@ -16,6 +17,6 @@ function HomeNav() {
       <img className={styles.vector} src="./ComponentTMP_0-image7.png" alt="" />
     </div>
   );
-}
+};
 
 export default HomeNav;

frontend/src/components/aboutUs/index.jsx frontend/src/components/aboutUs/index.tsxfrontend/src/components/aboutUs/index.jsx renamed to frontend/src/components/aboutUs/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import styles from "./style.module.css";
+import { useState } from "react";
+import NavLinks from "../navLinks";
+
+const Nav: React.FC = () => {
+  const [navState, setNavState] = useState<null | string>(null);
+  const openNav = () => {
+    if (navState === null) setNavState(styles.activeNav);
+    else setNavState(null);
+  };
+  return (
+    <div className={styles.container}>
+      <ul className={`${styles.navContainer} ${navState}`}>
+        <svg
+          onClick={openNav}
+          xmlns="http://www.w3.org/2000/svg"
+          width="33"
+          height="22"
+          viewBox="0 0 33 22"
+        >
+          <g id="Group_6" data-name="Group 6" transform="translate(-13 -13)">
+            <rect
+              id="Rectangle_1"
+              data-name="Rectangle 1"
+              width="33"
+              height="4"
+              rx="2"
+              transform="translate(13 13)"
+              fill="#42a9dc"
+            />
+            <rect
+              id="Rectangle_2"
+              data-name="Rectangle 2"
+              width="24"
+              height="4"
+              rx="2"
+              transform="translate(13 22)"
+              fill="#42a9dc"
+            />
+            <rect
+              id="Rectangle_3"
+              data-name="Rectangle 3"
+              width="30"
+              height="4"
+              rx="2"
+              transform="translate(13 31)"
+              fill="#42a9dc"
+            />
+          </g>
+        </svg>
+        <NavLinks />
+      </ul>
+    </div>
+  );
+};
+
+export default Nav;

frontend/src/components/homeNav/index.jsx frontend/src/components/homeNav/index.tsxfrontend/src/components/homeNav/index.jsx renamed to frontend/src/components/homeNav/index.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styles from "./style.module.css";
 import { Link } from "react-router-dom";
 
-function NavLinks() {
+const NavLinks: React.FC = () => {
   return (
     <>
       <Link to="" className={styles.Link}>
@@ -24,6 +25,6 @@ function NavLinks() {
       </Link>
     </>
   );
-}
+};
 
 export default NavLinks;