From 964ecdf848817393e42016f70465dd23374a9eea Mon Sep 17 00:00:00 2001
From: phoenixpereira <phoenixpereira99@gmail.com>
Date: Wed, 27 Dec 2023 21:09:04 +1030
Subject: [PATCH] refactor: Conditionally render component based on href prop
 in Button

---
 src/components/Button.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 32f5334c..3225a46f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -5,18 +5,21 @@ import React from 'react';
 interface ButtonProps {
     children: React.ReactNode;
     colour: string;
-    href: string;
+    href?: string;
 }
 
 const Button = ({ children, colour, href }: ButtonProps) => {
+    const isAnchor = !!href;
+    const Component = isAnchor ? 'a' : 'button';
+
     return (
         <FancyRectangle colour="black" offset="4" filled={true}>
-            <a
-                href={href}
+            <Component
+                href={isAnchor ? href : undefined}
                 className={`whitespace-nowrap py-4 px-12 md:py-1 md:px-2 lg:py-2 lg:px-6 border-2 border-black font-bold hover:bg-yellow transition-colors duration-300 ${bgColours[colour]}`}
             >
                 {children}
-            </a>
+            </Component>
         </FancyRectangle>
     );
 };