From 308a7f3a90199f59bd860c9ca5b4fec6c8b3a941 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 26 Feb 2022 21:51:40 -0500
Subject: [PATCH] Add input field

---
 .../components/admin/users/UsersContainerV2.tsx  | 16 ++++++++++++----
 .../components/elements/inputs/InputField.tsx    | 11 +++++++++++
 .../scripts/components/elements/inputs/index.ts  |  1 +
 .../components/elements/inputs/inputs.module.css |  9 +++++++++
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 resources/scripts/components/elements/inputs/InputField.tsx

diff --git a/resources/scripts/components/admin/users/UsersContainerV2.tsx b/resources/scripts/components/admin/users/UsersContainerV2.tsx
index d0b1118af..21c85ae4d 100644
--- a/resources/scripts/components/admin/users/UsersContainerV2.tsx
+++ b/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>
diff --git a/resources/scripts/components/elements/inputs/InputField.tsx b/resources/scripts/components/elements/inputs/InputField.tsx
new file mode 100644
index 000000000..fe90679f7
--- /dev/null
+++ b/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}
+    />
+));
diff --git a/resources/scripts/components/elements/inputs/index.ts b/resources/scripts/components/elements/inputs/index.ts
index 11e194edf..cd6d8964f 100644
--- a/resources/scripts/components/elements/inputs/index.ts
+++ b/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';
diff --git a/resources/scripts/components/elements/inputs/inputs.module.css b/resources/scripts/components/elements/inputs/inputs.module.css
index 7808a8343..c32a23fb8 100644
--- a/resources/scripts/components/elements/inputs/inputs.module.css
+++ b/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;
+  }
+}