refactor: clean up imports and improve component structure; remove unused variables

Author: sravanth-space

src/components/button/Button.tsx

@@ -4,7 +4,12 @@ import "./Button.css";
 export default function Button({text, className = "", href, newTab = false}) {
   return (
     <div className={className}>
-      <a className="main-button" href={href} target={newTab ? "_blank" : ""}>
+      <a
+        className="main-button"
+        href={href}
+        target={newTab ? "_blank" : ""}
+        rel="noreferrer"
+      >
         {text}
       </a>
     </div>

src/components/educationCard/EducationCard.tsx

@@ -1,4 +1,4 @@
-import React, {createRef, useContext, useRef} from "react";
+import React, {useContext, useRef} from "react";
 import {Fade, Slide} from "react-awesome-reveal";
 import "./EducationCard.css";
 import StyleContext from "../../contexts/StyleContext";

src/components/experienceCard/ExperienceCard.tsx

@@ -1,4 +1,4 @@
-import React, {useState, createRef, useRef} from "react";
+import React, {useState, useRef} from "react";
 import "./ExperienceCard.css";
 import ColorThief from "colorthief";
 

src/components/githubProfileCard/GithubProfileCard.tsx

@@ -4,7 +4,7 @@ import SocialMedia from "../socialMedia/SocialMedia";
 import {contactInfo} from "../../portfolio";
 import emoji from "react-easy-emoji";
 import {Fade} from "react-awesome-reveal";
-import locationLogo from "../../assets/images/locationLogo.svg";
+// import locationLogo from "../../assets/images/locationLogo.svg";
 export default function GithubProfileCard({prof}) {
   if (prof.hireable !== null) {
     prof.hireable = "Yes";

src/components/header/Header.css

@@ -71,7 +71,6 @@
 
 .header .menu-icon {
   cursor: pointer;
-  display: inline-block;
   float: right;
   padding: 28px 20px;
   position: relative;
@@ -162,6 +161,17 @@
     display: none;
   }
 }
+.toggle-switch-container {
+  display: block;
+  padding: 15px 20px;
+  color: black;
+  text-decoration: none;
+}
+
+.dark-menu .toggle-switch-container {
+  color: white;
+}
+
 @media (max-width: 960px) and (min-width: 768px) {
   .header {
     font-size: 12px;

src/components/header/Header.tsx

@@ -79,9 +79,9 @@ function Header() {
             <a href="#contact">Contact Me</a>
           </li>
           <li>
-            <a>
+            <div className="toggle-switch-container">
               <ToggleSwitch />
-            </a>
+            </div>
           </li>
         </ul>
       </header>

src/containers/Main.tsx

@@ -20,7 +20,6 @@ import {StyleProvider} from "../contexts/StyleContext";
 import {useLocalStorage} from "../hooks/useLocalStorage";
 import "./Main.css";
 import {
-  greeting,
   workExperiences,
   skillsSection,
   openSource,

src/containers/blogs/Blogs.tsx

@@ -9,7 +9,7 @@ import hashnodeData from "../../data/hash-blogs.json";
 
 export default function Blogs() {
   const {isDark} = useContext<any>(StyleContext);
-  const [mediumHashnodeBlogs, _] = useState([
+  const [mediumHashnodeBlogs] = useState([
     ...blogsData.items,
     ...hashnodeData.items
   ]);

src/containers/profile/Profile.tsx

@@ -1,15 +1,15 @@
-import React, { useState, lazy, Suspense } from "react";
-import { openSource } from "../../portfolio";
+import React, {useState, lazy, Suspense} from "react";
+import {openSource} from "../../portfolio";
 import Contact from "../contact/Contact";
 import Loading from "../loading/Loading";
-import profileData from '../../data/profile.json';
+import profileData from "../../data/profile.json";
 
 const renderLoader = () => <Loading />;
-const GithubProfileCard = lazy(() =>
-  import("../../components/githubProfileCard/GithubProfileCard")
+const GithubProfileCard = lazy(
+  () => import("../../components/githubProfileCard/GithubProfileCard")
 );
 export default function Profile() {
-  const [prof, setrepo] = useState(profileData.data.user);
+  const [prof] = useState(profileData.data.user);
   if (
     openSource.display &&
     openSource.showGithubProfile === "true" &&
@@ -23,4 +23,4 @@ export default function Profile() {
   } else {
     return <Contact />;
   }
-}
+}

src/containers/projects/Projects.tsx

@@ -11,7 +11,7 @@ export default function Projects() {
   );
   const FailedLoading = () => null;
   const renderLoader = () => <Loading />;
-  const [repo, setrepo] = useState(profileData.data.user.pinnedItems.edges);
+  const [repo] = useState(profileData.data.user.pinnedItems.edges);
   // todo: remove useContex because is not supported
   const {isDark} = useContext<any>(StyleContext);