bravio init project

components/InputUrl.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <label for="web" class="block text-sm text-gray-900 dark:text-white">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
+    <div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 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">
+      <img src="@/assets/svg/globe.svg" alt="" class="h-5 w-5" />
+      <input 
+        id="web" 
+        v-model="web"
+        type="url" 
+        name="web" 
+        :placeholder="placeholder" 
+        class="block min-w-0 grow py-1.5 pr-3 pl-1 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" 
+      />
+    </div>
+    <p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: { type: String, required: true },
+    required: { type: Boolean, default: true },
+    placeholder: { type: String, default: '' },
+  },
+  emits: ['input-value'],
+  data() {
+    return {
+      web: '',
+      error: ''
+    }
+  },
+  watch: {
+    web(newVal) {
+      this.error = '';
+      this.updateUrl(newVal);
+    }
+  },
+  methods: {
+    updateUrl(value){
+      const pattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w-./?%&=]*)?$/i;
+      if(pattern.test(value)){
+        this.error = '';
+        this.$emit('input-value', value);
+      } else {
+        this.error = "Por favor, introduce una URL válida.";
+      }
+    }
+  }
+}
+</script>