Fixed UI Managemember

src/pages/members/manage-members/blocks/ListToolBar.tsx

@@ -0,0 +1,53 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+
+const ListToolbar = ({ createMember }: { createMember: () => void }) => {
+  const { table, reload } = useDataGrid();
+  const [   usernameFilter, setUsernameFilter] = useState('');
+  const [emailFilter, setEmailFilter] = useState('');
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('username')?.setFilterValue(e.target.value);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmailFilter(e.target.value);
+    table.getColumn('email')?.setFilterValue(e.target.value);
+  };
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex gap-3 items-center">
+            <input
+              type="text"
+              placeholder="Search Username"
+              value={usernameFilter}
+              onChange={handleUsernameChange}
+              className="input input-sm w-40"
+            />
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={createMember}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;