From d138c15dcd4272cd2358d28867ef35d1550b39cd Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Mon, 15 May 2023 20:35:39 -0600
Subject: Mejora renderizado de formularios

---
 src/components/forms/fields/field.tsx           | 23 +++++++++++++++++++++++
 src/components/forms/fields/field_properties.ts |  9 +++++++++
 src/components/forms/fields/select_field.tsx    | 10 ++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/components/forms/fields/field.tsx
 create mode 100644 src/components/forms/fields/field_properties.ts
 create mode 100644 src/components/forms/fields/select_field.tsx

(limited to 'src/components/forms/fields')

diff --git a/src/components/forms/fields/field.tsx b/src/components/forms/fields/field.tsx
new file mode 100644
index 0000000..d7aa342
--- /dev/null
+++ b/src/components/forms/fields/field.tsx
@@ -0,0 +1,23 @@
+export default function Field({ properties }) {
+  let field_component;
+
+  if(properties.error_message) {
+    field_component = (
+      <div className="mb-6">
+        <label className="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">{ properties.label }</label>
+        <input type={properties.type} id={properties.id} name={properties.name} className="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" placeholder={properties.placeholder}/>
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500"> {properties.error_message }</p>
+      </div>
+    );
+  }
+  else {
+    field_component = (
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
+        <input type={properties.type} id={properties.id} name={properties.name} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={properties.placeholder}/>
+      </div>
+    );
+  }
+
+  return field_component;
+}
\ No newline at end of file
diff --git a/src/components/forms/fields/field_properties.ts b/src/components/forms/fields/field_properties.ts
new file mode 100644
index 0000000..d4e8066
--- /dev/null
+++ b/src/components/forms/fields/field_properties.ts
@@ -0,0 +1,9 @@
+export default interface FieldProperties {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder?: string;
+  error_message?: string;
+}
+
diff --git a/src/components/forms/fields/select_field.tsx b/src/components/forms/fields/select_field.tsx
new file mode 100644
index 0000000..75859d9
--- /dev/null
+++ b/src/components/forms/fields/select_field.tsx
@@ -0,0 +1,10 @@
+export default function SelectField({ properties, options }) {
+  return(
+    <div className="mb-6">
+      <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
+      <select id={properties.id} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+        {options}
+      </select>
+    </div>
+  );
+}
\ No newline at end of file
-- 
cgit v1.2.3