added buttons and button state code for companies section

ucsddesignco · Nov 2, 2024 · d1a2148 · d1a2148
1 parent 6997157
commit d1a2148
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/About/Companies/Companies.scss b/src/components/About/Companies/Companies.scss
@@ -10,7 +10,7 @@
       height: 100%;
       padding: 4px;
       color: white;
-      border: 2px solid white; // Thicker border
+      border: 2px solid white;
       border-radius: 4px;
       cursor: pointer;
       font-size: 14px;
@@ -24,6 +24,16 @@
           color: #6ee7b7;
         }
       }
+
+      &.selected {
+        background-color: #6ee7b7;
+        border-color: #6ee7b7;
+
+        p {
+          background-color: inherit;
+          color: black;
+        }
+      }
     }
   }
 }
diff --git a/src/components/About/Companies/Companies.tsx b/src/components/About/Companies/Companies.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react';
 import './Companies.scss';
 
 const buttonLabels = ['Button 1', 'Button 2', 'Button 3'];
 
 export default function Companies() {
+  const [selectedButton, setSelectedButton] = useState<number | null>(null);
+
   return (
     <div className="companies-section info">
       <h2 className="section-title">Companies and Organizations</h2>
@@ -94,7 +97,10 @@ export default function Companies() {
             className="button-display"
           >
             <div>
-              <button className="svg-button">
+              <button
+                className={`svg-button ${selectedButton === index ? 'selected' : ''}`}
+                onClick={() => setSelectedButton(index)}
+              >
                 <p>{label}</p>
               </button>
             </div>
@@ -113,7 +119,10 @@ export default function Companies() {
             className="button-display"
           >
             <div>
-              <button className="svg-button">
+              <button
+                className={`svg-button ${selectedButton === index ? 'selected' : ''}`}
+                onClick={() => setSelectedButton(index)}
+              >
                 <p>{label}</p>
               </button>
             </div>