Merge pull request #59 from mbeps/tweaks

Refactored button to simplify its functionality

app/projects/page.tsx

@@ -51,7 +51,7 @@ const ProjectsSection = () => {
         </div>
 
         <div className="flex justify-center mt-10">
-          <Button variant="outlined" action={handleOpenModal}>
+          <Button variant="outlined" onClick={handleOpenModal}>
             View More Projects
           </Button>
         </div>

components/Atoms/Button.tsx

@@ -6,10 +6,9 @@ import React from "react";
 type ButtonVariant = "filled" | "outlined" | "ghost";
 
 interface ButtonProps {
-  action: string | (() => void);
+  onClick: string | (() => void);
   variant: ButtonVariant;
   children: React.ReactNode;
-  isSamePage?: boolean;
 }
 
 /**
@@ -18,44 +17,28 @@ interface ButtonProps {
  * - filled: a filled button with a background color
  * - outlined: a button with a border and no background color
  * - ghost: a button with no background color and no border
- * This button can redirect to a different page or scroll to an element on the same page.
  *
- * @param to (string | (() => void)) The path to navigate to or a function to execute
- * @param variant (ButtonVariant) The variant of the button
- * @param children (React.ReactNode) The content of the button
- * @param isSamePage (boolean) Whether the button is on the same page or not
- * @returns (JSX.Element): a button
+ * @param onClick (string | function): the action to be performed when the button is clicked
+ * @param variant (ButtonVariant): the variant of the button
+ * @param children (React.ReactNode): the content of the button
+ *
+ * @returns (JSX.Element): button component
  */
-const Button = ({
-  action,
-  variant,
-  children,
-  isSamePage = false,
-}: ButtonProps) => {
+const Button = ({ onClick, variant, children }: ButtonProps) => {
   const router = useRouter();
 
   /**
-   * Handles the click event on the button.
-   * If the button is on the same page, it scrolls to the element with the id specified in the "to" prop.
-   * If the button is on a different page, it navigates to the path specified in the "to" prop.
+   * Handles the click event of the button.
+   * If the onClick prop is a function, it will execute the function.
+   * If the onClick prop is a string, it will redirect to the page.
    */
   const handleClick = () => {
-    if (typeof action === "function") {
-      // if to is a function, execute it
-      action();
-    } else if (isSamePage) {
-      // if to is a string, scroll to the element with the id specified
-      const element = document.getElementById(action as string);
-      if (element) {
-        window.scrollTo({
-          top: element.offsetTop,
-          behavior: "smooth",
-        });
-      }
-    } else {
-      // if to is a string, navigate to the specified path
-      router.push(action as string);
+    if (typeof onClick === "function") {
+      onClick();
+    } else if (typeof onClick === "string") {
+      router.push(onClick);
     }
+    return;
   };
 
   const baseStyle = `

components/Content/HeroSection.tsx

@@ -11,15 +11,27 @@ import HeadingOne from "./Text/HeadingOne";
  * Contains a short description of myself, a picture and a link to the projects section.
  */
 const HeroSection = () => {
+  /**
+   * Allows the user to scroll to a specific section of the page.
+   *
+   * @param sectionName (string): the name of the section to scroll to
+   */
+  const scrollToSection = (sectionName: string) => {
+    const element = document.getElementById(sectionName as string);
+    if (element) {
+      window.scrollTo({
+        top: element.offsetTop,
+        behavior: "smooth",
+      });
+    }
+  };
+
   return (
     <section
       id="home"
       className="min-h-[85vh] flex flex-col justify-between items-center "
     >
-      <div
-        className="flex flex-col text-center items-center justify-center animate-fadeIn animation-delay-2 md:flex-row md:space-x-4 md:text-left
-         my-auto"
-      >
+      <div className="flex flex-col text-center items-center justify-center animate-fadeIn animation-delay-2 md:flex-row md:space-x-4 md:text-left my-auto">
         <div className="md:mt-2 md:w-1/2">
           <Image
             src="/profile.png"
@@ -43,10 +55,20 @@ const HeroSection = () => {
           </p>
 
           <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
-            <Button action="projects" variant="filled" isSamePage>
+            <Button
+              variant="filled"
+              onClick={() => {
+                scrollToSection("projects");
+              }}
+            >
               Projects
             </Button>
-            <Button action="about" variant="ghost" isSamePage>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                scrollToSection("about");
+              }}
+            >
               About
             </Button>
           </div>

components/Content/ProjectSection/ProjectSection.tsx

@@ -1,7 +1,7 @@
 import Button from "@/components/Atoms/Button";
+import { webdevProjects } from "@/types/projects";
 import HeadingTwo from "../Text/HeadingTwo";
 import ProjectItem from "./ProjectItem";
-import { webdevProjects, machineLearningProjects } from "@/types/projects";
 
 /**
  * Project section listing the projects I have worked on.
@@ -33,7 +33,7 @@ const ProjectsSection = () => {
       </div>
 
       <div className="flex justify-center mt-10">
-        <Button variant="outlined" action="/projects">
+        <Button variant="outlined" onClick={"/projects"}>
           View More Projects
         </Button>
       </div>

components/Modal/MoreProjectsModal.tsx

@@ -27,16 +27,14 @@ const MoreProjectsModal: React.FC<MoreProjectsModalProps> = ({
       </p>
       <div className="flex flex-wrap flex-col justify-start z-10 mt-5 space-y-2">
         <Button
-          action="https://github.com/stars/mbeps/lists/leetcode"
+          onClick="https://github.com/stars/mbeps/lists/leetcode"
           variant="ghost"
-          isSamePage={false}
         >
           LeetCode Projects
         </Button>
         <Button
-          action="https://github.com/stars/mbeps/lists/university"
+          onClick="https://github.com/stars/mbeps/lists/university"
           variant="ghost"
-          isSamePage={false}
         >
           University Projects
         </Button>