From c62ab62bf97b62170afd436fac985be7d327fcb9 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Wed, 6 Nov 2024 09:34:18 +0100
Subject: [PATCH] feat: improve custom button and add prop to use it asLink
 when needed

---
 app/(prowler)/providers/page.tsx            |  2 --
 components/providers/add-provider.tsx       |  1 +
 components/ui/custom/custom-button.tsx      |  6 +++++-
 components/ui/headers/navigation-header.tsx | 20 +++++++++--------
 components/ui/sidebar/sidebar-wrap.tsx      | 24 ++++++++++-----------
 5 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index f80b59241e..177b403745 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -1,5 +1,4 @@
 import { Spacer } from "@nextui-org/react";
-import Link from "next/link";
 import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
@@ -27,7 +26,6 @@ export default async function Providers({
       <Spacer y={4} />
       <FilterControls search providers />
       <Spacer y={4} />
-      <Link href="/providers/connect-account">add provider</Link>
       <AddProvider />
       <Spacer y={4} />
 
diff --git a/components/providers/add-provider.tsx b/components/providers/add-provider.tsx
index 01e85db980..c732d41007 100644
--- a/components/providers/add-provider.tsx
+++ b/components/providers/add-provider.tsx
@@ -7,6 +7,7 @@ export const AddProvider = () => {
   return (
     <div className="flex w-full items-center justify-end">
       <CustomButton
+        asLink="/providers/connect-account"
         ariaLabel="Add Account"
         variant="solid"
         color="action"
diff --git a/components/ui/custom/custom-button.tsx b/components/ui/custom/custom-button.tsx
index b2a6cf355a..9c3e71b3f4 100644
--- a/components/ui/custom/custom-button.tsx
+++ b/components/ui/custom/custom-button.tsx
@@ -1,4 +1,4 @@
-import { Button, CircularProgress } from "@nextui-org/react";
+import { Button, CircularProgress, Link } from "@nextui-org/react";
 import type { PressEvent } from "@react-types/shared";
 import clsx from "clsx";
 import React from "react";
@@ -50,6 +50,7 @@ interface CustomButtonProps {
   isLoading?: boolean;
   isIconOnly?: boolean;
   ref?: React.RefObject<HTMLButtonElement>;
+  asLink?: string;
 }
 
 export const CustomButton = React.forwardRef<
@@ -73,11 +74,14 @@ export const CustomButton = React.forwardRef<
       isDisabled = false,
       isLoading = false,
       isIconOnly,
+      asLink,
       ...props
     },
     ref,
   ) => (
     <Button
+      as={asLink ? Link : undefined}
+      href={asLink}
       type={type}
       aria-label={ariaLabel}
       aria-disabled={ariaDisabled}
diff --git a/components/ui/headers/navigation-header.tsx b/components/ui/headers/navigation-header.tsx
index 3b7fc71a9b..eb2c92201f 100644
--- a/components/ui/headers/navigation-header.tsx
+++ b/components/ui/headers/navigation-header.tsx
@@ -1,8 +1,9 @@
 import { Icon } from "@iconify/react";
 import { Divider } from "@nextui-org/react";
-import Link from "next/link";
 import React from "react";
 
+import { CustomButton } from "@/components/ui/custom/custom-button";
+
 interface NavigationHeaderProps {
   title: string;
   icon: string;
@@ -17,15 +18,16 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   return (
     <>
       <header className="flex items-center gap-3 border-b border-gray-200 px-6 py-4 dark:border-gray-800">
-        <Link
-          className="mr-3 flex h-[2.625rem] w-[2.625rem] items-center justify-center rounded-lg border border-solid border-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700"
-          href={href || ""}
+        <CustomButton
+          asLink={href || ""}
+          className="border-gray-200 bg-transparent p-0"
+          ariaLabel="Navigation button"
+          variant="bordered"
+          isIconOnly
+          radius="lg"
         >
-          <Icon
-            icon={icon}
-            className="h-5 w-5 text-gray-600 dark:text-gray-400"
-          />
-        </Link>
+          <Icon icon={icon} className="text-gray-600 dark:text-gray-400" />
+        </CustomButton>
         <Divider orientation="vertical" className="h-6" />
         <h1 className="text-xl font-light text-default-700">{title}</h1>
       </header>
diff --git a/components/ui/sidebar/sidebar-wrap.tsx b/components/ui/sidebar/sidebar-wrap.tsx
index 19a1de94bc..36717e4e3b 100644
--- a/components/ui/sidebar/sidebar-wrap.tsx
+++ b/components/ui/sidebar/sidebar-wrap.tsx
@@ -91,19 +91,17 @@ export const SidebarWrap = () => {
             "w-full": !isCompact,
           })}
         >
-          {/* TODO: Create a custom-link component and use it here */}
-          <Link href={"/scans"}>
-            <CustomButton
-              className="w-full"
-              ariaLabel="Launch Scan"
-              variant="solid"
-              color="action"
-              size="md"
-              endContent={<AddIcon size={20} />}
-            >
-              Launch Scan
-            </CustomButton>
-          </Link>
+          <CustomButton
+            asLink="/scans"
+            className="w-full"
+            ariaLabel="Launch Scan"
+            variant="solid"
+            color="action"
+            size="md"
+            endContent={<AddIcon size={20} />}
+          >
+            Launch Scan
+          </CustomButton>
         </div>
       </div>