[V0_FILE]typescriptreact:file="app/actions/send-email.ts" isMerged="true" "use server" import { Resend } from "resend" export async function sendEmail(formData: FormData) { try { const resend = new Resend(process.env.RESEND_API_KEY) const email = formData.get("email") as string const message = formData.get("message") as string if (!email || !message) { return { error: "All fields are required" } } if (!process.env.RESEND_TO_EMAIL_ADDRESS) { return { error: "Missing environment variable: RESEND_TO_EMAIL_ADDRESS" } } const data = await resend.emails.send({ from: "Acme ", to: process.env.RESEND_TO_EMAIL_ADDRESS, subject: "New Contact Form Submission", text: ` Email: ${email} Message: ${message} `, }) return { success: "Email sent successfully" } } catch (error) { if ('message' in error && error.message.includes('Missing API key')) { return { error: "Missing environment variable: RESEND_API_KEY" } } return { error: error.message ?? "Failed to send email" } } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { ContactForm } from "./components/contact-form" import { Toaster } from "@/components/ui/toaster" export default function ContactPage() { return (

Get in touch

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-feature-settings: "ss01" on, "ss02" on, "ss03" on, "ss04" on, "ss05" on; } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { ReactNode } from "react" import "./globals.css" export default function RootLayout({ children, }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/contact-form.tsx" isEdit="true" "use client" import { useActionState, useEffect } from "react" import Image from "next/image" import { SubmitButton } from "./submit-button" import { toast } from "@/components/ui/use-toast" import { sendEmail } from "../actions/send-email" export function ContactForm() { async function handleSubmit(formData: FormData) { const result = await sendEmail(formData) if (result.success) { toast({ title: "Success", description: result.success, }) } else { toast({ variant: "destructive", title: "Error", description: result.error, }) } } return (

Email address

How can we help?

</div>

<div className="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
        <SubmitButton />
        <div className="flex items-center gap-2 text-gray-400">
          Powered by
          <a href="https://resend.com" target="_blank" rel="noopener noreferrer">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Resend_wordmark_dark-i35Qj7S9FUiAKsOo5C24TYfVgCDrKL.svg"
              alt="Resend"
              width={75}
              height={24}
              className="relative top-[1px]"
            />
          </a>
        </div>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/components/submit-button.tsx" isEdit="true"
"use client"
import { ArrowRight, Loader2 } from "lucide-react"
import { useFormStatus } from "react-dom"

export function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button
      type="submit"
      disabled={pending}
      className="bg-gray-200 hover:bg-gray-300 text-black px-8 py-4 rounded-full text-xl font-medium inline-flex items-center justify-center gap-2 transition-all duration-300 ease-in-out disabled:opacity-50 disabled:hover:bg-gray-200 min-w-[180px] h-[60px] w-full sm:w-auto"
    >
      {pending ? (
        <Loader2 className="w-6 h-6 animate-spin" />
      ) : (
        <>
          <span>Send Message</span>
          <ArrowRight className="w-6 h-6" />
        </>
      )}
    </button>
  )
}
</article></body></html>