From af899fa50bc84895494735e869cb15437a828b88 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:30:00 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Refactor=20ButtonClose=20compone?=
 =?UTF-8?q?nt=20=F0=9F=9A=A7=20Improve=20code=20readability=20=F0=9F=94=A7?=
 =?UTF-8?q?=20Add=20onClick=20default=20value=20=F0=9F=A7=B9=20Remove=20re?=
 =?UTF-8?q?dundant=20code=20=F0=9F=9A=80=20Ready=20for=20integration!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/ButtonClose.tsx b/src/shared/ButtonClose.tsx
new file mode 100644
index 0000000..39ea487
--- /dev/null
+++ b/src/shared/ButtonClose.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import twFocusClass from "@/utils/twFocusClass";
+
+export interface ButtonCloseProps {
+  className?: string;
+  onClick?: () => void;
+}
+
+const ButtonClose: React.FC<ButtonCloseProps> = ({
+  className = "",
+  onClick = () => {},
+}) => {
+  return (
+    <button
+      className={
+        `w-8 h-8 flex items-center justify-center rounded-full text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 ${className} ` +
+        twFocusClass()
+      }
+      onClick={onClick}
+    >
+      <span className="sr-only">Close</span>
+      <XMarkIcon className="w-5 h-5" />
+    </button>
+  );
+};
+
+export default ButtonClose;