add pages

superpage/src/pages/_components/Contact.Astro

@@ -1,35 +0,0 @@
----
-import Label from './_label.astro'
-import Input from './_input.astro'
-import Textarea from './_textarea.astro'
-
-// https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562
-
-if (Astro.request.method === 'POST') {
-    try {
-        const data = await Astro.request.formData()
-        console.log(data)
-    } catch (error) {
-        if (error instanceof Error) {
-            console.error(error.message)
-        }
-    }
-}
----
-
-<form method="POST" class="lg:w-6/12 mx-auto flex flex-col gap-2.5">
-    <Label>
-        <span class="lg:w-14">Nome</span>
-        <Input name="name" />
-    </Label>
-    <Label>
-        <span class="lg:w-14">Email</span>
-        <Input name="email" />
-    </Label>
-    <Label class="flex-col !items-start !gap-1">
-        <span>Mensagem</span>
-        <Textarea name="message" class="h-26" />
-    </Label>
-
-    <button type="submit">Enviar</button>
-</form>

superpage/src/pages/_components/Contact.jsx

@@ -0,0 +1,81 @@
+import { Form, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { createElement } from 'react'
+import clsx from 'clsx'
+import { z } from 'zod'
+
+const schema = z.object({
+  name: z.string().nonempty({ message: 'Deve preencher o nome' }),
+  email: z.string().nonempty({ message: 'Deve preencher o email' }).email({ message: 'Deve ser um email válido' }),
+  message: z.string().nonempty({ message: 'Deve preencher a mensagem' }),
+})
+
+export default function Contact() {
+  const { register, formState, control, reset } = useForm({ resolver: zodResolver(schema) })
+
+  return (
+    <Form
+      action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
+      onSuccess={() => reset()}
+      control={control}
+      className="lg:w-6/12 mx-auto flex flex-col gap-2.5"
+    >
+      {formState.isSubmitSuccessful && (
+        <p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
+          Sua mensagem foi enviada com sucesso.
+        </p>
+      )}
+
+      <div>
+        <Label>
+          <span className="lg:w-14">Nome</span>
+          <Input aria-invalid={!!formState.errors?.name} {...register('name')} />
+        </Label>
+        <Error>{formState.errors.name?.message}</Error>
+      </div>
+
+      <div>
+        <Label>
+          <span className="lg:w-14">Email</span>
+          <Input aria-invalid={!!formState.errors?.name} {...register('email')} />
+        </Label>
+        <Error>{formState.errors.email?.message}</Error>
+      </div>
+
+      <div>
+        <Label className="flex-col !items-start !gap-1">
+          <span>Mensagem</span>
+          <Input as="textarea" className="h-28" aria-invalid={!!formState.errors?.message} {...register('message')} />
+        </Label>
+        <Error className="lg:!pl-0">{formState.errors.message?.message}</Error>
+      </div>
+
+      <button type="submit" className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition">
+        Enviar
+      </button>
+    </Form>
+  )
+}
+
+export function Input({ as = 'input', className, ...props }) {
+  return createElement(as, {
+    className: clsx(
+      'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-0 transition duration-150',
+      'aria-invalid:outline-2 aria-invalid:outline-red-600',
+      className,
+    ),
+    ...props,
+  })
+}
+
+function Label({ children, className }) {
+  return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
+}
+
+function Error({ children, className }) {
+  if (children) {
+    return <p className={clsx('text-sm text-red-500 lg:pl-16', className)}>{children}</p>
+  }
+
+  return null
+}

superpage/src/pages/_components/_input.astro

@@ -1,7 +0,0 @@
-<input
-    class:list={[
-        'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
-        Astro.props.class,
-    ]}
-    {...Astro.props}
-/>

superpage/src/pages/_components/_label.astro

@@ -1,3 +0,0 @@
-<label class:list={['flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', Astro.props.class]}>
-    <slot />
-</label>

superpage/src/pages/_components/_textarea.astro

@@ -1,8 +0,0 @@
-<textarea
-    class:list={[
-        'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
-        Astro.props.class,
-    ]}
-    {...Astro.props}
->
-</textarea>