Merge pull request #12 from rrigato/dev

about and projects button
rrigato · Nov 12, 2023 · 9f8ba1e · 9f8ba1e
2 parents 3080c27 + 128ddc1
commit 9f8ba1e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -11,8 +11,8 @@ body, html {
 .toggle-container{
     align-items: center;
     display: flex;
-    justify-content: center;
     height: 80%;
+    justify-content: center;
 }
 
 
diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx
@@ -1,13 +1,51 @@
 import React from 'react';
+import {useState} from 'react';
 import '../css/main.css';
 
 export function HomePageToggle(){
+    /**
+     * @type {[Number, Function]}
+     */
+    const [selectedSection, setSelectedSelection] = useState(0);
     return(
         <div id='home-page-toggle-component'  className='full-height'>
             <div className='toggle-container'>
-                <button>Projects</button>
+                <button
+                    onClick={
+                        () => {
+                            setSelectedSelection(0);
+                        }
+                    }
+                >
+                Projects
+                </button>
+
+                <button
+                    onClick={
+                        () => {
+                            setSelectedSelection(1)
+                        }
+                    }
+                >
+                About
+                </button>
+
+                <button
+                    onClick={
+                        () => {
+                            setSelectedSelection(2)
+                        }
+                    }
+                >
+                Blog
+                </button>
+
                 <br/>
-                <div id='toggle-0'>
+                <div 
+                    id='toggle-0' 
+                    hidden= {
+                        selectedSection !== 0
+                    }>
                     Latest Projects
                 </div>
             </div>

diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js
@@ -8,9 +8,13 @@ describe('Central Content for site', () => {
         const {getByRole} = render(<HomePageToggle/>);
 
 
+        const aboutButton = await getByRole(
+            'button', {name: 'About'}
+        );
         const projectButton = await getByRole(
             'button', {name: 'Projects'}
         );
 
+
     });
 });