feat(front): update InputGroupField component with improved delete button styling and add new Textarea component for enhanced text input

front/components/Field/InputGroupField.vue

@@ -20,7 +20,14 @@ const addInput = ref('')
                 :aria-invalid="!!errorMessage || undefined"
                 v-bind="$attrs"
             />
-            <Button variant="ghost" size="icon" @click="setValue(value.filter((_, i) => i !== index))"><LucideX class="size-4" /></Button>
+            <Button
+                variant="ghost"
+                size="icon"
+                class="bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white"
+                @click="setValue(value.filter((_, i) => i !== index))"
+            >
+                <LucideTrash class="size-4" />
+            </Button>
         </div>
         <div class="flex flex-row gap-2 items-center">
             <Input v-model="addInput" :aria-invalid="!!errorMessage || undefined" v-bind="$attrs" />

front/components/Field/TextareaField.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+
+const props = withDefaults(
+    defineProps<{
+        name: string
+        label?: string
+        placeholder?: string
+        rows?: number
+    }>(),
+    {
+        rows: 3,
+    }
+)
+
+const { value } = useField<string>(props.name)
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label v-if="label">{{ label }}</Label>
+        <Textarea v-model="value" :placeholder="placeholder" :rows="rows" v-bind="$attrs" />
+    </div>
+</template>