bravio init project

components/InputTextarea.vue

@@ -0,0 +1,37 @@
+<template>
+   <div class="space-y-2">
+    <label for="textarea" class="block text-sm text-gray-900 dark:text-white">{{ label }}</label>
+    <div class="h-full flex items-center rounded-md bg-white pl-2 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
+      <textarea 
+        id="textarea" 
+        name="textarea" 
+        rows="3" 
+        class="block  grow p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500" 
+        placeholder="Input" 
+        @input="onInput" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputTextarea',
+  props: {
+    label: { type: String, default: 'Textarea' },
+    placeholder: { type: String, default: 'Input' },
+    required: { type: Boolean, default: false },
+  },
+  emits: ['input-value'],
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    onInput(event) {
+      this.value = event.target.value;
+      this.$emit('input-value', this.value); 
+    }
+  }
+}
+</script>