Refactor Button and change Hero button design

Author: w3bdesign

src/components/Index/Hero.component.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import Link from 'next/link';
+import Button from '../UI/Button.component';
 
 /**
  * Renders Hero section for Index page
@@ -25,12 +25,12 @@ const Hero = () => (
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
           Stripete Zig Zag Pute Sett
         </h1>
-        <Link 
+        <Button 
           href="/produkter"
-          className="inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-100 transition-colors duration-200"
+          isHero
         >
           Se Utvalget
-        </Link>
+        </Button>
       </div>
     </div>
   </section>

src/components/UI/Button.component.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import Link from 'next/link';
 
 type TButtonColors = 'red' | 'blue';
 
@@ -8,6 +9,8 @@ interface IButtonProps {
   color?: TButtonColors;
   children: ReactNode;
   fullWidth?: boolean;
+  isHero?: boolean;
+  href?: string;
 }
 
 /**
@@ -26,21 +29,38 @@ const Button = ({
   color = 'blue',
   children,
   fullWidth = false,
-}: IButtonProps) => (
-  <button
-    onClick={handleButtonClick}
-    disabled={buttonDisabled}
-    className={`px-2 lg:px-4 py-2 font-bold bg-blue-500 border border-gray-400 border-solid rounded text-white ease-in-out transition-all duration-300 disabled:opacity-50
-      ${
+  isHero = false,
+  href,
+}: IButtonProps) => {
+  const buttonClasses = isHero
+    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white'
+    : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${
         color === 'blue'
           ? 'bg-blue-500 hover:bg-blue-600'
           : 'bg-red-500 hover:bg-red-600'
-      }
-      ${fullWidth ? 'w-full md:w-auto' : ''}
-    `}
-  >
-    {children}
-  </button>
-);
+      }`;
+
+  const classes = `${buttonClasses} ease-in-out transition-all duration-300 disabled:opacity-50 ${
+    fullWidth ? 'w-full md:w-auto' : ''
+  }`;
+
+  if (href && isHero) {
+    return (
+      <Link href={href} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleButtonClick}
+      disabled={buttonDisabled}
+      className={classes}
+    >
+      {children}
+    </button>
+  );
+};
 
 export default Button;