clearble inputs

src/pages/user/UserSearch.tsx

@@ -1,4 +1,5 @@
 import { type FC, useEffect, useRef, useState } from "react";
+import { CloseCircle } from "iconsax-react";
 import { clx } from "@/helpers/utils";
 import { useUserSearch } from "./hooks/useUserSearch";
 import type { UserType } from "./types/Types";
@@ -51,22 +52,51 @@ const UserSearch: FC<UserSearchProps> = ({
   const displayLabel = (user: UserType) =>
     user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.phone;
 
+  useEffect(() => {
+    if (!value) {
+      setSearch("");
+    }
+  }, [value]);
+
+  const handleClear = () => {
+    setSearch("");
+    setIsOpen(false);
+    onChange?.("");
+  };
+
+  const hasValue = Boolean(value || search);
+
   return (
     <div ref={wrapperRef} className={clx("w-full relative", className)}>
       {label && (
         <label className="text-sm text-primary-content block mb-1">{label}</label>
       )}
-      <input
-        type="text"
-        value={search}
-        onChange={(e) => {
-          setSearch(e.target.value);
-          setIsOpen(true);
-        }}
-        onFocus={() => setIsOpen(true)}
-        placeholder={placeholder}
-        className="w-full bg-white h-10 text-black block px-4 text-xs rounded-xl border border-border"
-      />
+      <div className="relative">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder={placeholder}
+          className={clx(
+            "w-full bg-white h-10 text-black block px-4 text-xs rounded-xl border border-border",
+            hasValue && "pl-10",
+          )}
+        />
+        {hasValue && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute top-0 bottom-0 my-auto left-3 z-10 flex items-center"
+            aria-label="پاک کردن"
+          >
+            <CloseCircle size={16} color="#8C90A3" />
+          </button>
+        )}
+      </div>
       {isOpen && debouncedSearch.length > 0 && (
         <div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border border-border rounded-xl shadow-lg max-h-60 overflow-auto">
           {isFetching ? (