From e2c044ec3524b32917228999cd812ae9eeeb95d6 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Wed, 5 Nov 2025 21:58:44 -0500
Subject: [PATCH 1/2] feat(button): integrate onClick and isActive props,
 create active class styling for user selection buttons

---
 src/App.css               | 7 +++++++
 src/components/Button.jsx | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 33331d4..c829a2b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,3 +11,10 @@ button:not(.toggle-btn):active {
   background-color: var(--color-persianblue);
   color: white;
 }
+button.active {
+  background-color: var(--color-persianblue);
+  color: white;
+}
+button.active:hover {
+  background-color: var(--color-persianblue);
+}
\ No newline at end of file
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 756e7a3..19c8fd0 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
     // base styles for all buttons
-    base: 'flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+    base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
     // all button variants
     variants: {
         size: {
@@ -33,8 +33,8 @@ const buttonVariants = tv({
     ]
 });
 
-export default function Button({ size, color, label }) {
+export default function Button({ size, color, label, onClick, isActive }) {
     return (
-        <button className={buttonVariants({ size, color })}>{label}</button>
+        <button onClick={onClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}>{label}</button>
     )
 }
\ No newline at end of file

From a20b8842d76ab7ff062a34bc8dc943ae3507e96b Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Wed, 5 Nov 2025 22:18:21 -0500
Subject: [PATCH 2/2] feat(button): integrate handleClick for conditional
 navigation vs action buttons

---
 src/components/Button.jsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 19c8fd0..1c0af15 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
@@ -24,7 +25,7 @@ const buttonVariants = tv({
     },
     // conditional style cases for specific prop combinations
     compoundVariants: [
-        // remove drop shadow and lower font weight for onboarding quiz button
+        // remove drop shadow and lower font weight for user selection button
         {
             color: 'secondary',
             size: 'md',
@@ -33,8 +34,18 @@ const buttonVariants = tv({
     ]
 });
 
-export default function Button({ size, color, label, onClick, isActive }) {
+export default function Button({ size, color, label, onClick, isActive, to }) {
+    let navigate = useNavigate();
+
+    function handleClick(){
+        if (to){
+            navigate(to);
+        } else {
+            onClick();
+        }
+    }
+
     return (
-        <button onClick={onClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}>{label}</button>
-    )
+        <button onClick={handleClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}>{label}</button>
+    );
 }
\ No newline at end of file