v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

contact email

Browse source
This commit is contained in:
isaconantonis 2023-08-02 15:16:52 +02:00
parent f4f9e47997
commit 20cc339948
7 changed files with 453 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/api/send/route.ts Normal file
View file

@ -0,0 +1,21 @@
import { NextResponse } from "next/server"
import { Resend } from "resend"
import { EmailTemplate } from "../../../components/Email/EmailTemplate"
const resend = new Resend(process.env.RESEND_API_KEY)
export async function POST(request: Request) {
const res = await request.json()
try {
const data = await resend.emails.send({
subject: res.subject,
from: "onboarding@resend.dev",
react: EmailTemplate(res),
to: "sam.antonis@isacon.be",
})
return NextResponse.json(data)
} catch (error) {
return NextResponse.json({ error })
}
}

178
app/contact/page.tsx Normal file
View file

@ -0,0 +1,178 @@
"use client"
import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
import { FormEvent } from "react"
interface EmailData {
firstName: {
value: string
}
lastName: {
value: string
}
email: {
value: string
}
message: {
value: string
}
phoneNumber: {
value: string
}
}
export default function Contact() {
function handleSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault()
const form = event.target as EmailData
fetch("/api/send", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
firstName: form.firstName.value,
lastName: form.lastName.value,
email: form.email.value,
message: form.message.value,
phoneNumber: form.phoneNumber.value,
subject: "Contact Form Submission",
}),
})
}
return (
<div className="relative isolate bg-primary-50">
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div className="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
<div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<h2 className="text-3xl font-bold tracking-tight text-primary-800">Get in touch</h2>
<p className="mt-6 text-lg leading-8 text-primary-800">
Feel free to contact me for any questions or inquiries.
we will get back to you as soon as possible.
</p>
<dl className="mt-10 space-y-4 text-base leading-7 text-primary-800">
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Address</span>
<BuildingOffice2Icon className="h-7 w-6 text-primary-800" aria-hidden="true" />
</dt>
<dd>
Ticheltij 16
<br />
Westmalle, 2390, Antwerpen
</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Telephone</span>
<PhoneIcon className="h-7 w-6 text-primary-800" aria-hidden="true" />
</dt>
<dd>
<a className="hover:text-white" href="tel:+1 (555) 234-5678">
+32496799751
</a>
</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Email</span>
<EnvelopeIcon className="h-7 w-6 text-primary-800" aria-hidden="true" />
</dt>
<dd>
<a className="hover:text-white" href="mailto:hello@example.com">
sam.antonis@isacon.be
</a>
</dd>
</div>
</dl>
</div>
</div>
<form onSubmit={handleSubmit} className="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48">
<div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="firstName" className="block text-sm font-semibold leading-6 text-primary-800">
First name
</label>
<div className="mt-2.5">
<input
type="text"
name="firstName"
id="firstName"
autoComplete="given-name"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-semibold leading-6 text-primary-800">
Last name
</label>
<div className="mt-2.5">
<input
type="text"
name="lastName"
id="lastName"
autoComplete="family-name"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-primary-800">
Email
</label>
<div className="mt-2.5">
<input
type="email"
name="email"
id="email"
autoComplete="email"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phoneNumber" className="block text-sm font-semibold leading-6 text-primary-800">
Phone number
</label>
<div className="mt-2.5">
<input
type="tel"
name="phoneNumber"
id="phoneNumber"
autoComplete="tel"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-primary-800">
Message
</label>
<div className="mt-2.5">
<textarea
name="message"
id="message"
rows={4}
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
defaultValue={""}
/>
</div>
</div>
</div>
<div className="mt-8 flex justify-end">
<button
type="submit"
className="rounded-md bg-primary-800 px-3.5 py-2.5 text-center text-sm font-semibold text-primary-50 shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
>
Send message
</button>
</div>
</div>
</form>
</div>
</div>
)
}