clan-cli: Fixed CORS issue. UI: Readded id as tableData property

pkgs/ui/src/components/table/searchBar.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ChangeEvent, SetStateAction, Dispatch } from "react";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import SearchIcon from "@mui/icons-material/Search";
+
+export interface SearchBarProps {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+}
+
+export function SearchBar(props: SearchBarProps) {
+  const { search, setSearch } = props;
+  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  };
+
+  return (
+    <label htmlFor="search">
+      <Tooltip title="Filter list">
+        <IconButton>
+          <SearchIcon />
+        </IconButton>
+      </Tooltip>
+      <input id="search" type="text" value={search} onChange={handleSearch} />
+    </label>
+  );
+}