feat(FE-64): refactor MovementTable with new TableToolbar and TableRowSizeSelector components

src/components/table/TableToolbar.tsx

@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import DebouncedTextInput from '../input/DebouncedTextInput';
+
+interface TableToolbarProps {
+  addButton?: {
+    href: string;
+    label: string;
+  };
+  search: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+  };
+}
+
+export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
+  return (
+    <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+      {addButton && (
+        <div className='flex flex-row'>
+          <Button href={addButton.href} color='primary'>
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            {addButton.label}
+          </Button>
+        </div>
+      )}
+      <DebouncedTextInput
+        name='search'
+        placeholder={search.placeholder || 'Cari...'}
+        value={search.value}
+        onChange={search.onChange}
+        className={{ wrapper: 'sm:max-w-3xs' }}
+      />
+    </div>
+  );
+};