add form properties and tailwind script

web/src/components/FormBuilder.vue

@@ -2,12 +2,33 @@
   <div class="min-h-screen bg-gray-100 flex flex-row items-start p-4">
     <div class="flex-col flex-1 items-center justify-center p-4">
       <h2 class="text-xl font-bold mb-4">Form Builder</h2>
-      <DynamicForm :formInputs="formBuilderInputs" @send="handleFormBuilderSubmit" />
+      <div>
+        <DynamicForm
+            class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+            :formInputs="formBuilderPropertiesInputs"
+            @send="handleFormPropertiesSubmit"
+            form-title="Form Properties"
+            submit-label="Update Form"
+        />
+      </div>
+      <div class="mt-6">
+        <DynamicForm
+            class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+            :formInputs="formBuilderFieldInputs"
+            @send="handleFormBuilderSubmit"
+            form-title="Add a new field"
+        />
+      </div>
     </div>
 
     <div v-if="generatedFormInputs.length" class="flex-col flex-1 items-center justify-center p-4">
       <h2 class="text-xl font-bold mb-4">Generated Form</h2>
-      <DynamicForm :formInputs="generatedFormInputs" />
+      <DynamicForm
+          class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
+          :formInputs="generatedFormInputs"
+          :submitLabel="submitLabel"
+          :formTitle="formTitle"
+      />
     </div>
   </div>
 </template>
@@ -17,7 +38,32 @@ import { ref } from 'vue';
 import DynamicForm from './DynamicForm.vue';
 import type {FormInput} from "@/components/DynamicForm.vue";
 
-const formBuilderInputs = ref<FormInput[]>([
+const formBuilderPropertiesInputs = ref<FormInput[]>([
+  {
+    id: 'formTitle',
+    label: 'Form Title',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'formDescription',
+    label: 'Form Description',
+    type: 'textarea',
+    required: false
+  },
+  {
+    id: 'submitLabel',
+    label: 'Submit Button Label',
+    type: 'text',
+    required: false
+  }
+]);
+
+const formTitle = ref('');
+const formDescription = ref('');
+const submitLabel = ref('');
+
+const formBuilderFieldInputs = ref<FormInput[]>([
   {
     id: 'fieldType',
     label: 'Field Type',
@@ -107,6 +153,12 @@ const formBuilderInputs = ref<FormInput[]>([
 
 const generatedFormInputs = ref<FormInput[]>([]);
 
+const handleFormPropertiesSubmit = (formData: Record<string, any>) => {
+  formTitle.value = formData.formTitle;
+  formDescription.value = formData.formDescription;
+  submitLabel.value = formData.submitLabel;
+};
+
 const handleFormBuilderSubmit = (formData: Record<string, any>) => {
   const newField: FormInput = {
     id: formData.fieldID,
@@ -124,7 +176,7 @@ const handleFormBuilderSubmit = (formData: Record<string, any>) => {
   generatedFormInputs.value.push(newField);
 
   // Reset form builder fields
-  formBuilderInputs.value.forEach(input => {
+  formBuilderFieldInputs.value.forEach(input => {
     if (input.type === 'checkbox' || input.type === 'multi-input') {
       formData[input.id] = [];
       if (input.id === 'showLabel') { // showLabel should default to true