From 20cc339948afd2218d8c25bd7a113eb637c4a24e Mon Sep 17 00:00:00 2001 From: isaconantonis Date: Wed, 2 Aug 2023 15:16:52 +0200 Subject: [PATCH] contact email --- app/api/send/route.ts | 21 +++ app/contact/page.tsx | 178 ++++++++++++++++++++++ components/Email/EmailTemplate.tsx | 24 +++ components/Navbar/Navbar.tsx | 5 + package.json | 3 + tailwind.config.js | 4 +- yarn.lock | 227 ++++++++++++++++++++++++++++- 7 files changed, 453 insertions(+), 9 deletions(-) create mode 100644 app/api/send/route.ts create mode 100644 app/contact/page.tsx create mode 100644 components/Email/EmailTemplate.tsx diff --git a/app/api/send/route.ts b/app/api/send/route.ts new file mode 100644 index 0000000..450b687 --- /dev/null +++ b/app/api/send/route.ts @@ -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 }) + } +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..5064cbc --- /dev/null +++ b/app/contact/page.tsx @@ -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) { + 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 ( +
+
+
+
+

Get in touch

+

+ Feel free to contact me for any questions or inquiries. + we will get back to you as soon as possible. +

+
+
+
+ Address +
+
+ Ticheltij 16 +
+ Westmalle, 2390, Antwerpen +
+
+
+
+ Telephone +
+
+ + +32496799751 + +
+
+
+
+ Email +
+
+ + sam.antonis@isacon.be + +
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+