feat: search bar

Signed-off-by: Ali Aziri <ali.aziri@prestatech.com>

Explorer/src/components/containerTable.tsx

@@ -13,6 +13,29 @@ export default function ContainerTable({
 }): JSX.Element {
   const [sortedList, setSortedList] = useState([...list]);
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredContainers, setFilteredContainers] =
+    useState<ContainerList>(list);
+
+  const handleSearch = () => {
+    const filtered = list.filter(
+      (container) =>
+        container.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        container.image.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+    setFilteredContainers(filtered);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
   const handleSortAsc = () => {
     const sorted = [...sortedList];
     sorted.sort((a, b) => a.status.localeCompare(b.status));
@@ -26,6 +49,24 @@ export default function ContainerTable({
   };
   return (
     <div>
+      <div className="mb-4 text-right">
+        <input
+            type="text"
+            placeholder="Search..."
+            value={searchTerm}
+            onChange={handleInputChange}
+            onKeyPress={handleKeyPress}
+            className="border border-gray-300 px-4 py-2 rounded-md"
+          />
+        <button
+          type="button"
+          onClick={handleSearch}
+          className="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md"
+        >
+          Search
+        </button>
+
+      </div>
       <Table>
         <Table.Head>
           <Table.HeadCell
@@ -58,7 +99,7 @@ export default function ContainerTable({
           </Table.HeadCell>
         </Table.Head>
         <Table.Body>
-          {sortedList.map((container: ContainerData, index: number) => (
+        {filteredContainers.map((container: ContainerData, index: number) => (
             <Table.Row key={index}>
               <Table.Cell className="whitespace-normal font-medium text-gray-900 dark:text-white !py-2">
                 <Link