From 34586d9ce80b985a055cc7c9639b62ea5ec035e5 Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Sat, 16 Mar 2024 12:37:24 +0000
Subject: [PATCH] added tabs to web projects section

---
 src/components/WebProjects.jsx | 40 +++++++++++++++++++++++-----------
 src/context/ProjectContext.jsx |  4 +++-
 src/styles/projects.css        | 12 +++++-----
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index ece101f..d6fbb1e 100644
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@@ -1,25 +1,39 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
 import { webProjects } from "@/data/webdata.js";
+import { useProjectContext } from "@/context/ProjectContext";
 
 
 function WebProjects() {
+  const { projectNumber, setProjectNumber } = useProjectContext();
+  function handleProjectTabs(arg) {
+    setProjectNumber(arg);
+  }
+
   return (
     <section id="webprojects" className="subProjectsContainer">
-    <div className="projectItemsContainer">
-    {webProjects.map((item) => {
-      return (
-        <div key={item.Name} className="projectIndividualItemContainer">
-          <h3>{item.Name}</h3>
-          <p>{item.Details}</p>
-          <p>{item.Features}</p>
-          <p>{item.Technologies}</p>
-          <p>{item.GitHub}</p>
-          <p>{item.Hosted}</p>
+      <div className="projectItemsContainer">
+      <div  className="projectButtonsContainer">
+        {webProjects.map((item, index) => {
+          return (
+                <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
+          );
+        })}
         </div>
-      );
-    })}
-    </div>
+        {webProjects.map((item, index) => {
+          return(
+            <>
+            {projectNumber === index && <div key={item.Name} className="projectIndividualItemContainer">
+              <h3>{item.Name}</h3>
+              <p>{item.Details}</p>
+              <p>{item.Features}</p>
+              <p>{item.Technologies}</p>
+              <p>{item.GitHub}</p>
+              <p>{item.Hosted}</p>
+            </div>}
+          </>);
+      })}
+      </div>
     </section>
   );
 };
diff --git a/src/context/ProjectContext.jsx b/src/context/ProjectContext.jsx
index 5df8747..5a250d6 100644
--- a/src/context/ProjectContext.jsx
+++ b/src/context/ProjectContext.jsx
@@ -7,8 +7,10 @@ const ProjectContext = createContext();
 
 export default function ProjectContextProvider({ children }) {
   const [typeProject, setTypeProject] = useState("web");
+  const [projectNumber, setProjectNumber] = useState(0);
+  
   return (
-    <ProjectContext.Provider value = {{typeProject, setTypeProject}}>
+    <ProjectContext.Provider value = {{typeProject, setTypeProject, projectNumber, setProjectNumber}}>
     {children}
     </ProjectContext.Provider>
   );
diff --git a/src/styles/projects.css b/src/styles/projects.css
index b712444..6663cde 100644
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@@ -13,16 +13,11 @@
 
 .projectItemsContainer {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   position: relative;
   padding: 1rem;
   margin: 1rem;
   max-width: 100vw;
-  overflow-x: scroll;
-  position: relative;
-  scrollbar-color: white black;
-  scrollbar-width: thin;
-  -ms-overflow-style: none;
 }
 
 .projectIndividualItemContainer {
@@ -37,6 +32,11 @@
   text-align: center; 
 }
 
+.projectButtonsContainer {
+  display: flex;
+  flex-direction: row;
+}
+
 .projectSelectionButtonsContainer {
   display: flex;
   flex-direction: row;