From 44c3201cf0f9f7511cc6edba54c47652d07d65f2 Mon Sep 17 00:00:00 2001
From: emersoftware <87254036+emersoftware@users.noreply.github.com>
Date: Wed, 7 May 2025 17:44:32 -0400
Subject: [PATCH 1/2] translate to english

---
 components/FormContainer.js |  2 +-
 components/FormField.js     | 14 +++++++-------
 package-lock.json           | 15 +--------------
 pages/index.js              |  8 ++++----
 4 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/components/FormContainer.js b/components/FormContainer.js
index 38b1c96..166c79f 100644
--- a/components/FormContainer.js
+++ b/components/FormContainer.js
@@ -85,7 +85,7 @@ export default function FormContainer() {
             onClick={addFormField} 
             className='inline-flex bg-gray-800 hover:bg-gray-200 items-center px-3 py-1 text-slate-50 rounded-md'
           >
-            Añadir campo
+            Add field
           </button>
         </div>
       </div>
diff --git a/components/FormField.js b/components/FormField.js
index dcc1c03..24f56e3 100644
--- a/components/FormField.js
+++ b/components/FormField.js
@@ -32,9 +32,9 @@ export default function FormField({
         </div>
       </div>
       <div className="my-2">
-        {field.type === "text" && <input type="text" placeholder="Este es el input de texto" readOnly/>}
-        {field.type === "number" && <input type="number" placeholder="" readOnly/>}
-        {field.type === "date" && <input type="date" placeholder="" readOnly/>}
+        {field.type === "text" && <input type="text" placeholder="This is the text input" readOnly/>}
+        {field.type === "number" && <input type="number" placeholder="This is the number input" readOnly/>}
+        {field.type === "date" && <input type="date" placeholder="This is the date input" readOnly/>}
         
         {(field.type === "checkbox" || field.type === "radio") && (
           <div className="flex flex-col space-y-2">
@@ -53,7 +53,7 @@ export default function FormField({
                   className="text-red-600 hover:text-red-900" 
                   onClick={() => onDeleteOption(field.id, opt)}
                 >
-                  Eliminar opcion
+                  Delete option
                 </button>
               </div>
             ))}
@@ -67,7 +67,7 @@ export default function FormField({
                 className="text-blue-900 hover:text-blue-600" 
                 onClick={() => onAddOption(field.id, option)}
               >
-                Añadir opción
+                Add option
               </button>
             </div>
           </div>
@@ -101,7 +101,7 @@ export default function FormField({
                 className="text-blue-900 hover:text-blue-600" 
                 onClick={() => onAddOption(field.id, option)}
               >
-                Añadir opción
+                Add option
               </button>
             </div>
           </div>
@@ -112,7 +112,7 @@ export default function FormField({
           className="bg-red-700 hover:bg-red-200 text-neutral-100 rounded-md px-3 py-1" 
           onClick={() => onDelete(field.id)}
         >
-          Eliminar campo
+          Delete field
         </button>
       </div>
     </>
diff --git a/package-lock.json b/package-lock.json
index 9da4486..281f4b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "adestos-forms",
       "version": "0.1.0",
       "dependencies": {
         "@tailwindcss/forms": "^0.5.3",
@@ -431,7 +432,6 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -745,19 +745,6 @@
       "integrity": "sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==",
       "dependencies": {
         "@next/env": "12.3.1",
-        "@next/swc-android-arm-eabi": "12.3.1",
-        "@next/swc-android-arm64": "12.3.1",
-        "@next/swc-darwin-arm64": "12.3.1",
-        "@next/swc-darwin-x64": "12.3.1",
-        "@next/swc-freebsd-x64": "12.3.1",
-        "@next/swc-linux-arm-gnueabihf": "12.3.1",
-        "@next/swc-linux-arm64-gnu": "12.3.1",
-        "@next/swc-linux-arm64-musl": "12.3.1",
-        "@next/swc-linux-x64-gnu": "12.3.1",
-        "@next/swc-linux-x64-musl": "12.3.1",
-        "@next/swc-win32-arm64-msvc": "12.3.1",
-        "@next/swc-win32-ia32-msvc": "12.3.1",
-        "@next/swc-win32-x64-msvc": "12.3.1",
         "@swc/helpers": "0.4.11",
         "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
diff --git a/pages/index.js b/pages/index.js
index 16c2e49..a05cd68 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,13 +6,13 @@ export default function Home() {
   return (
     <>
       <Head>
-        <title>Adestos Forms</title>
-        <meta name="description" content="Crea tu formulario" />
+        <title>Forms</title>
+        <meta name="description" content="Create your form" />
       </Head>
       <div className="container mx-auto px-4 w-2/4 h-full">
         <div className="flex flex-col w-6/12 space-x-7 my-7">
-          <h1 className="text-4xl font-bold">Adestos-Forms</h1>
-          <h2 className="text-2xl font-bold">Crea tu formulario</h2>
+          <h1 className="text-4xl font-bold">Forms</h1>
+          <h2 className="text-2xl font-bold">Create your form</h2>
         </div>
         <FormContainer />
       </div>

From bc2da3b8e89cdda1f91312342d37dda8c440a1f3 Mon Sep 17 00:00:00 2001
From: emersoftware <87254036+emersoftware@users.noreply.github.com>
Date: Wed, 7 May 2025 18:10:04 -0400
Subject: [PATCH 2/2] add preview

---
 components/FormContainer.js |  70 +++++++++++++++++--------
 components/FormPreview.js   | 102 ++++++++++++++++++++++++++++++++++++
 package.json                |   2 +-
 pages/index.js              |   4 +-
 4 files changed, 153 insertions(+), 25 deletions(-)
 create mode 100644 components/FormPreview.js

diff --git a/components/FormContainer.js b/components/FormContainer.js
index 166c79f..e286bad 100644
--- a/components/FormContainer.js
+++ b/components/FormContainer.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import FormField from './FormField';
+import FormPreview from './FormPreview';
 
 export default function FormContainer() {
   const [formContent, setFormContent] = useState([]);
   const [option, setOption] = useState("");
+  const [showPreview, setShowPreview] = useState(false);
 
   const addFormField = () => {
     const field = {
@@ -64,31 +66,55 @@ export default function FormContainer() {
     setFormContent(formField);
   }
 
+  const togglePreview = () => {
+    setShowPreview(!showPreview);
+  };
+
   return (
-    <div className="bg-white shadow-lg rounded-md p-5 my-12">
-      {formContent.map((field) => (
-        <FormField
-          key={field.id}
-          field={field}
-          option={option}
-          onTypeChange={editFieldType}
-          onTitleChange={editFieldTitle}
-          onDelete={deleteField}
-          onAddOption={addOption}
-          onDeleteOption={deleteOption}
-          setOption={setOption}
-        />
-      ))}
-      <div className="relative w-full p-4">
-        <div className="absolute inset-x-0 bottom-0 h-12 flex justify-center">
-          <button 
-            onClick={addFormField} 
-            className='inline-flex bg-gray-800 hover:bg-gray-200 items-center px-3 py-1 text-slate-50 rounded-md'
-          >
-            Add field
-          </button>
+    <div className="flex flex-col md:flex-row gap-6 w-full">
+      <div className={`${showPreview ? 'md:w-1/2' : 'w-full'}`}>
+        <div className="bg-white shadow-lg rounded-md p-5 my-12">
+          <div className="flex justify-between mb-4">
+            <h3 className="text-xl font-bold">Form Editor</h3>
+            <button 
+              onClick={togglePreview} 
+              className='inline-flex bg-indigo-600 hover:bg-indigo-700 items-center px-3 py-1 text-white rounded-md'
+            >
+              {showPreview ? 'Hide Preview' : 'Show Preview'}
+            </button>
+          </div>
+          
+          {formContent.map((field) => (
+            <FormField
+              key={field.id}
+              field={field}
+              option={option}
+              onTypeChange={editFieldType}
+              onTitleChange={editFieldTitle}
+              onDelete={deleteField}
+              onAddOption={addOption}
+              onDeleteOption={deleteOption}
+              setOption={setOption}
+            />
+          ))}
+          <div className="relative w-full p-4">
+            <div className="absolute inset-x-0 bottom-0 h-12 flex justify-center">
+              <button 
+                onClick={addFormField} 
+                className='inline-flex bg-gray-800 hover:bg-gray-200 items-center px-3 py-1 text-slate-50 rounded-md'
+              >
+                Add field
+              </button>
+            </div>
+          </div>
         </div>
       </div>
+      
+      {showPreview && (
+        <div className="md:w-1/2">
+          <FormPreview formContent={formContent} />
+        </div>
+      )}
     </div>
   );
 } 
\ No newline at end of file
diff --git a/components/FormPreview.js b/components/FormPreview.js
new file mode 100644
index 0000000..38602d6
--- /dev/null
+++ b/components/FormPreview.js
@@ -0,0 +1,102 @@
+import React from 'react';
+
+export default function FormPreview({ formContent }) {
+  return (
+    <div className="bg-white shadow-lg rounded-md p-5 my-12">
+      <h3 className="text-xl font-bold mb-4">Form Preview</h3>
+      <form>
+        {formContent.map((field) => (
+          <div key={field.id} className="mb-4">
+            <label htmlFor={field.id} className="block text-sm font-medium mb-2">
+              {field.title}
+            </label>
+            
+            {field.type === "text" && (
+              <input 
+                type="text" 
+                id={field.id} 
+                name={field.id} 
+                className="w-full p-2 border rounded-md"
+              />
+            )}
+            
+            {field.type === "number" && (
+              <input 
+                type="number" 
+                id={field.id} 
+                name={field.id} 
+                className="w-full p-2 border rounded-md"
+              />
+            )}
+            
+            {field.type === "date" && (
+              <input 
+                type="date" 
+                id={field.id} 
+                name={field.id} 
+                className="w-full p-2 border rounded-md"
+              />
+            )}
+            
+            {field.type === "checkbox" && (
+              <div className="space-y-2">
+                {field.options.map((opt) => (
+                  <div key={opt} className="flex items-center">
+                    <input 
+                      type="checkbox" 
+                      id={`${field.id}_${opt}`} 
+                      name={field.id} 
+                      value={opt} 
+                      className="mr-2"
+                    />
+                    <label htmlFor={`${field.id}_${opt}`}>{opt}</label>
+                  </div>
+                ))}
+              </div>
+            )}
+            
+            {field.type === "radio" && (
+              <div className="space-y-2">
+                {field.options.map((opt) => (
+                  <div key={opt} className="flex items-center">
+                    <input 
+                      type="radio" 
+                      id={`${field.id}_${opt}`} 
+                      name={field.id} 
+                      value={opt} 
+                      className="mr-2"
+                    />
+                    <label htmlFor={`${field.id}_${opt}`}>{opt}</label>
+                  </div>
+                ))}
+              </div>
+            )}
+            
+            {field.type === "select" && (
+              <select 
+                id={field.id} 
+                name={field.id} 
+                className="w-full p-2 border rounded-md"
+              >
+                <option value="">Select an option</option>
+                {field.options.map((opt) => (
+                  <option key={opt} value={opt}>{opt}</option>
+                ))}
+              </select>
+            )}
+          </div>
+        ))}
+        
+        {formContent.length > 0 && (
+          <button 
+            type="submit" 
+            className="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md"
+            onClick={(e) => e.preventDefault()}
+          >
+            Submit
+          </button>
+        )}
+      </form>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e90d039..3ffd5fe 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/pages/index.js b/pages/index.js
index a05cd68..d758cf7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,8 +9,8 @@ export default function Home() {
         <title>Forms</title>
         <meta name="description" content="Create your form" />
       </Head>
-      <div className="container mx-auto px-4 w-2/4 h-full">
-        <div className="flex flex-col w-6/12 space-x-7 my-7">
+      <div className="container mx-auto px-4 w-full md:w-5/6 lg:w-3/4 h-full">
+        <div className="flex flex-col w-full md:w-6/12 space-y-2 my-7">
           <h1 className="text-4xl font-bold">Forms</h1>
           <h2 className="text-2xl font-bold">Create your form</h2>
         </div>