From 3633ef97c50b0b8932b20c36a2c5ade674819582 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:32:03 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20Button=20com?=
 =?UTF-8?q?ponent=20=F0=9F=9A=80=20Improved=20code=20structure=20and=20rea?=
 =?UTF-8?q?dability=20=E2=9C=A8=20Added=20loading=20spinner=20for=20better?=
 =?UTF-8?q?=20user=20experience=20=F0=9F=94=97=20Enhanced=20link=20handlin?=
 =?UTF-8?q?g=20with=20targetBlank=20prop=20=F0=9F=90=9B=20Fixed=20minor=20?=
 =?UTF-8?q?issues=20and=20improved=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Button.tsx | 89 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/shared/Button.tsx

diff --git a/src/shared/Button.tsx b/src/shared/Button.tsx
new file mode 100644
index 0000000..ed534e9
--- /dev/null
+++ b/src/shared/Button.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Route } from "@/routers/types";
+import Link from "next/link";
+import React, { ButtonHTMLAttributes, FC } from "react";
+
+export interface ButtonProps {
+  className?: string;
+  translate?: string;
+  sizeClass?: string;
+  fontSize?: string;
+  //
+  loading?: boolean;
+  disabled?: boolean;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  href?: Route<string>;
+  targetBlank?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const Button: FC<ButtonProps> = ({
+  className = "text-neutral-700 dark:text-neutral-200",
+  translate = "",
+  sizeClass = "px-4 py-3 sm:px-6",
+  fontSize = "text-sm sm:text-base font-medium",
+  disabled = false,
+  href,
+  children,
+  targetBlank,
+  type,
+  loading,
+  onClick = () => {},
+}) => {
+  const CLASSES = `nc-Button relative h-auto inline-flex items-center justify-center rounded-full transition-colors ${fontSize} ${sizeClass} ${translate} ${className} `;
+
+  const _renderLoading = () => {
+    return (
+      <svg
+        className="animate-spin -ml-1 mr-3 h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="3"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    );
+  };
+
+  if (!!href) {
+    return (
+      <Link
+        href={href}
+        target={targetBlank ? "_blank" : undefined}
+        className={`${CLASSES} `}
+        onClick={onClick}
+        rel={targetBlank ? "noopener noreferrer" : undefined}
+      >
+        {children || `This is Link`}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`${CLASSES}`}
+      onClick={onClick}
+      type={type}
+    >
+      {loading && _renderLoading()}
+      {children || `This is Button`}
+    </button>
+  );
+};
+
+export default Button;