Update package.json and Form.astro

package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "astro dev --remote",
+		"dev": "astro dev",
 		"start": "astro dev",
 		"build": "astro build --remote",
 		"preview": "astro preview",

src/components/Form.astro

@@ -5,7 +5,7 @@
 <form class='w-full'>
 	<div class='mb-5'>
 		<label for='email' class='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-			>Your Email</label
+			>Tu email</label
 		>
 		<input
 			type='email'
@@ -19,7 +19,7 @@
 	<div class='mb-5'></div>
 
 	<label for='message' class='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-		>Your message</label
+		>Tu mensaje</label
 	>
 	<textarea
 		id='message'
@@ -30,16 +30,22 @@
 		class='w-full p-4 text-lg bg-black/30 rounded-lg'></textarea>
 	<button
 		type='submit'
-		class='w-full p-4 text-lg bg-black/40 hover:border-2 border-white/20 rounded-lg'
-		'>Send</button
+		class='w-full p-4 text-lg bg-black/40 hover:scale-105 border-white/20 rounded-lg transition-all'
+		'>Enviar</button
 	>
+
+	<div
+		class='flex alert items-center p-4 mb-4 text-sm rounded-lg bg-black/40 text-green-400 mt-6 opacity-0 transition-all duration-300 ease-in-out'
+		role='alert'
+	>
+		<span class='sr-only'>Info</span>
+		<div class='font-medium'></div>
+	</div>
 </form>
 
 <script>
 	const form = document.querySelector('form')
 	form!.addEventListener('submit', async (e) => {
-		console.log('hola')
-
 		e.preventDefault()
 		const email = form!.email.value
 		const message = form!.message.value
@@ -50,5 +56,32 @@
 			},
 			body: JSON.stringify({ email, message })
 		})
+			.then((res) => {
+				if (res.ok) {
+					form!.querySelector('.alert')!.classList.remove('opacity-0')
+					const alertElement = form!.querySelector('.alert') as HTMLElement
+					alertElement.innerText = 'Mensaje enviado correctamente'
+
+					setInterval(() => {
+						alertElement.classList.add('opacity-0')
+						alertElement.innerText = ''
+					}, 5000)
+					form!.reset()
+				} else {
+					const alertElement = form!.querySelector('.alert') as HTMLElement
+
+					alertElement.classList.remove('opacity-0')
+					alertElement.classList.add('text-red-400')
+					alertElement.innerText = 'Mensaje no enviado, intente de nuevo.'
+
+					setInterval(() => {
+						alertElement.classList.add('opacity-0')
+						alertElement.innerText = ''
+					}, 5000)
+				}
+			})
+			.finally(() => {
+				form!.reset()
+			})
 	})
 </script>