created UI for adding parameters

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -4,6 +4,7 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
 import {ref} from 'vue'
+import TabComponent from "@components/xml/TabComponent.vue";
 
 const props = defineProps(
     {
@@ -37,6 +38,10 @@ function canBeFormatted() {
       props.stylizedName.toLowerCase() == 'xslt'
 }
 
+function addParameters() {
+  return props.stylizedName?.toLowerCase() == "xslt"
+}
+
 function readFile(file: any) {
 
   const reader = new FileReader()
@@ -49,22 +54,52 @@ function readFile(file : any) {
   reader.readAsText(file.target.files[0])
 }
 
+
 </script>
 
 <template>
   <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
+    <div class="flex justify-between mb-2"></div>
+
     <div class="flex place-content-between w-full items-center">
       <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2 overflow-x-auto">
       <div class="flex items-stretch w-64">
         <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
       </div>
-                
+      <div class="flex space-x-2 pb-2 overflow-x-auto">
         <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
         <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
         <button class="tool-button" @click="clear">Clear</button>
       </div>
     </div>
-        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+
+    <div class="flex place-content-between w-full items-center">
+      <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
+        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
+          <option> ---Choose tutorial--- </option>
+          <option> w3schools </option>
+          <option> Javatpoint </option>
+          <option> tutorialspoint </option>
+          <option> geeksforgeeks </option>
+        </select>
+        <input
+            id="textInput1"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 1"
+        />
+        <input
+            id="textInput2"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 2"
+        />
+        <button class="tool-button" @click="clear">Add Variable</button>
       </div>
+    </div>
+
+    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
+                :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  </div>
+
 </template>