Initial commit

src/components/General/Form/FormTextInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import 'twin.macro';
+import { ErrorMessage, Field } from 'formik';
+
+export interface FormTextInputProps {
+  name: string,
+  placeholder?: string,
+  maxLength?: number,
+  autoFocus?: boolean
+}
+
+export default function FormTextInput({
+  name,
+  placeholder,
+  maxLength,
+  autoFocus,
+}: FormTextInputProps) {
+  return (
+    <>
+      <Field
+        name={name}
+        tw="w-full bg-gray-100 dark:bg-gray-800 rounded-lg px-4 leading-8 border-2 border-gray-200 dark:border-gray-700 focus:border-gray-400 focus:dark:border-gray-600 text-gray-800 dark:text-gray-200"
+        placeholder={placeholder}
+        maxLength={maxLength}
+        autoFocus={autoFocus}
+      />
+      <ErrorMessage
+        name={name}
+        component="div"
+        tw="pt-2 text-red-800 text-sm font-semibold"
+      />
+    </>
+  );
+}