Added User List table

src/components/ui/search-input.tsx

@@ -0,0 +1,43 @@
+import { MagnifyingGlassIcon, XIcon } from '@phosphor-icons/react';
+import { Button } from './button';
+import { InputGroup, InputGroupAddon, InputGroupInput } from './input-group';
+
+type SearchInputProps = {
+  keywords: string;
+  setKeyword: (value: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const SearchInput = ({ keywords, setKeyword, onChange }: SearchInputProps) => {
+  const onClearSearch = () => {
+    setKeyword('');
+  };
+
+  return (
+    <InputGroup className="w-70">
+      <InputGroupInput
+        id="keywords"
+        placeholder="Search...."
+        value={keywords}
+        onChange={onChange}
+      />
+      <InputGroupAddon>
+        <MagnifyingGlassIcon />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        {keywords !== '' && (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="rounded-full"
+            onClick={onClearSearch}
+          >
+            <XIcon />
+          </Button>
+        )}
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+export default SearchInput;