WIP

2021-08-07 20:52:38 +10:00
parent 919412b7bb
commit fa5d816d1b
55 changed files with 841 additions and 1235 deletions
@@ -0,0 +1,54 @@
+import React from 'react';
+
+export interface InputProps {
+  valid?: boolean;
+  placeholder?: string;
+  validationMessage?: string;
+  icon?: JSX.Element;
+  type: string;
+  name: string;
+  value?: string;
+}
+
+export const Input = ({
+  valid,
+  placeholder,
+  validationMessage,
+  icon,
+  type,
+  name,
+  value,
+}: InputProps): JSX.Element => {
+  return (
+    <div className="space-y-1">
+      <label
+        htmlFor={name}
+        className="block text-sm font-medium dark:text-white"
+      >
+        {name}
+      </label>
+      <div className="relative">
+        {icon && (
+          <div className="flex absolute inset-y-0 left-0 px-3 items-center pointer-events-none">
+            {React.cloneElement(icon, {
+              className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
+            })}
+          </div>
+        )}
+        <input
+          type={type}
+          name={name}
+          id={name}
+          value={value}
+          className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
+            icon ? 'pl-9' : 'pl-2'
+          }`}
+          placeholder={placeholder}
+        />
+      </div>
+      {!valid && (
+        <div className="text-sm text-gray-600">{validationMessage}</div>
+      )}
+    </div>
+  );
+};