Refactor

Author: w3bdesign

src/components/Product/ProductFilters.component.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Product, ProductType } from '@/types/product';
+import Button from '@/components/UI/Button.component';
 
 interface ProductFiltersProps {
   selectedSizes: string[];
@@ -107,17 +108,14 @@ const ProductFilters = ({
           <h3 className="font-semibold mb-4">STØRRELSE</h3>
           <div className="grid grid-cols-3 gap-2">
             {sizes.map((size) => (
-              <button
+              <Button
                 key={size}
-                onClick={() => toggleSize(size)}
-                className={`px-3 py-1 border rounded ${
-                  selectedSizes.includes(size)
-                    ? 'bg-gray-900 text-white'
-                    : 'hover:bg-gray-100'
-                }`}
+                handleButtonClick={() => toggleSize(size)}
+                variant="filter"
+                selected={selectedSizes.includes(size)}
               >
                 {size}
-              </button>
+              </Button>
             ))}
           </div>
         </div>
@@ -142,12 +140,12 @@ const ProductFilters = ({
           </div>
         </div>
 
-        <button
-          onClick={resetFilters}
-          className="w-full mt-8 py-2 px-4 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+        <Button
+          handleButtonClick={resetFilters}
+          variant="reset"
         >
           Resett filter
-        </button>
+        </Button>
       </div>
     </div>
   );

src/components/UI/Button.component.tsx

@@ -1,53 +1,62 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 
-type TButtonColors = 'red' | 'blue';
+type TButtonVariant = 'primary' | 'secondary' | 'hero' | 'filter' | 'reset';
 
 interface IButtonProps {
   handleButtonClick?: () => void;
   buttonDisabled?: boolean;
-  color?: TButtonColors;
-  children: ReactNode;
+  variant?: TButtonVariant;
+  children?: ReactNode;
   fullWidth?: boolean;
-  isHero?: boolean;
   href?: string;
+  title?: string;
+  selected?: boolean;
 }
 
 /**
  * Renders a clickable button
  * @function Button
  * @param {void} handleButtonClick - Handle button click
  * @param {boolean?} buttonDisabled - Is button disabled?
- * @param {TButtonColors?} color - Color for button, either red or blue
+ * @param {TButtonVariant?} variant - Button variant
  * @param {ReactNode} children - Children for button
  * @param {boolean?} fullWidth - Whether the button should be full-width on mobile
+ * @param {boolean?} selected - Whether the button is in a selected state
  * @returns {JSX.Element} - Rendered component
  */
 const Button = ({
   handleButtonClick,
   buttonDisabled,
-  color = 'blue',
+  variant = 'primary',
   children,
   fullWidth = false,
-  isHero = false,
   href,
+  title,
+  selected = false,
 }: IButtonProps) => {
-  const getColorClasses = (buttonColor: TButtonColors) => {
-    if (buttonColor === 'blue') {
-      return 'bg-blue-500 hover:bg-blue-600';
+  const getVariantClasses = (variant: TButtonVariant = 'primary') => {
+    switch (variant) {
+      case 'hero':
+        return 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white hover:shadow-md';
+      case 'filter':
+        return selected 
+          ? 'px-3 py-1 border rounded bg-gray-900 text-white'
+          : 'px-3 py-1 border rounded hover:bg-gray-100 bg-white text-gray-900';
+      case 'reset':
+        return 'w-full mt-8 py-2 px-4 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors';
+      case 'secondary':
+        return 'px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white bg-red-500 hover:bg-red-600';
+      default: // primary
+        return 'px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white bg-blue-500 hover:bg-blue-600';
     }
-    return 'bg-red-500 hover:bg-red-600';
   };
 
-  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 hover:shadow-md'
-    : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${getColorClasses(color)}`;
-
-  const classes = `${buttonClasses} ease-in-out transition-all duration-300 disabled:opacity-50 ${
+  const classes = `${getVariantClasses(variant)} ease-in-out transition-all duration-300 disabled:opacity-50 ${
     fullWidth ? 'w-full md:w-auto' : ''
   }`;
 
-  if (href && isHero) {
+  if (href && variant === 'hero') {
     return (
       <Link href={href} className={classes}>
         {children}
@@ -60,6 +69,7 @@ const Button = ({
       onClick={handleButtonClick}
       disabled={buttonDisabled}
       className={classes}
+      title={title}
     >
       {children}
     </button>