Add input field

resources/scripts/components/admin/users/UsersContainerV2.tsx

@@ -14,7 +14,7 @@ import {
 } from '@heroicons/react/solid';
 import { Button } from '@/components/elements/button/index';
 import { Dialog } from '@/components/elements/dialog';
-import { Checkbox } from '@/components/elements/inputs';
+import { Checkbox, InputField } from '@/components/elements/inputs';
 
 const UsersContainerV2 = () => {
     const [ users, setUsers ] = useState<User[]>([]);
@@ -44,13 +44,21 @@ const UsersContainerV2 = () => {
                 This account will be permanently deleted.
                 <Dialog.Buttons>
                     <Button.Text
-                        className={'!ring-offset-neutral-800'}
                         onClick={() => setVisible(false)}
-                    >Cancel
+                    >
+                        Cancel
                     </Button.Text>
-                    <Button.Danger className={'!ring-offset-neutral-800'}>Delete</Button.Danger>
+                    <Button.Danger>Delete</Button.Danger>
                 </Dialog.Buttons>
             </Dialog>
+            <div className={'flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
+                <div className={'mr-6'}>
+                    <Checkbox />
+                </div>
+                <div className={'flex-1'}>
+                    <InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} />
+                </div>
+            </div>
             <table className={'min-w-full rounded bg-neutral-700'}>
                 <thead className={'bg-neutral-900'}>
                     <tr>

resources/scripts/components/elements/inputs/InputField.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styles from './inputs.module.css';
+
+export default forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(({ className, ...props }, ref) => (
+    <input
+        ref={ref}
+        className={classNames('form-input', styles.text_input, className)}
+        {...props}
+    />
+));

resources/scripts/components/elements/inputs/index.ts

@@ -1,2 +1,3 @@
 export { default as Checkbox } from './Checkbox';
+export { default as InputField } from './InputField';
 export { default as styles } from './inputs.module.css';

resources/scripts/components/elements/inputs/inputs.module.css

@@ -5,3 +5,12 @@
     @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
   }
 }
+
+.text_input {
+  @apply transition-all duration-75;
+  @apply bg-neutral-800 border-neutral-600 rounded px-4 py-2 outline-none;
+
+  &:focus {
+    @apply border-blue-600 ring-2 ring-blue-500;
+  }
+}