From 7ff4d04488bfe8d7e7a445ba1fa11b8522ed6e3e Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:26:10 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20add=20clear=20data=20button=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a clear data button to the UI.
---
 .../(HeroSearchFormSmall)/ClearDataButton.tsx | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchFormSmall)/ClearDataButton.tsx

diff --git a/src/app/(client-components)/(HeroSearchFormSmall)/ClearDataButton.tsx b/src/app/(client-components)/(HeroSearchFormSmall)/ClearDataButton.tsx
new file mode 100644
index 0000000..0151d21
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchFormSmall)/ClearDataButton.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+import { FC } from "react";
+
+export interface ClearDataButtonProps {
+  onClick?: () => void;
+}
+
+const ClearDataButton: FC<ClearDataButtonProps> = ({ onClick }) => {
+  return (
+    <span
+      onClick={() => onClick && onClick()}
+      className=" absolute z-10 w-5 h-5 lg:w-6 lg:h-6 text-sm bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center justify-center right-1 lg:right-1.5 top-1/2 transform -translate-y-1/2 "
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </span>
+  );
+};
+
+export default ClearDataButton;