Putting an X for clearing of entry in EVERY search bar field

client/src/components/molecules/GlobalSearchFilter/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { Search } from 'react-feather'
+import { Search, X } from 'react-feather'
 import React, { FC, InputHTMLAttributes, useEffect, useState } from 'react'
 
 type Props = {
@@ -26,6 +26,11 @@ const GlobalSearchFilter: FC<Props> = (props): JSX.Element => {
     return () => clearTimeout(timeout)
   }, [value])
 
+  const handleClear = () => {
+    setValue('')
+    onChange('') // Notify parent to clear search results
+  }
+
   return (
     <div className={classNames('group flex items-center space-x-2', className)}>
       <Search className="h-5 w-5 text-slate-400 group-focus-within:text-amber-500" />
@@ -41,6 +46,15 @@ const GlobalSearchFilter: FC<Props> = (props): JSX.Element => {
         onChange={(e) => setValue(e.target.value)}
         placeholder="Search"
       />
+
+      <button
+        type="button"
+        className="flex h-5 w-5 items-center justify-center text-slate-400 focus:outline-none hover:text-amber-500"
+        onClick={handleClear}
+        aria-label="Clear search"
+      >
+        <X className="h-5 w-5" />
+      </button>
     </div>
   )
 }