import { Body, Container, Head, Heading, Hr, Html, Preview, Section, Text, } from "@react-email/components"; import * as React from "react"; interface ContactEmailProps { name: string; email: string; message: string; subject?: string; productName?: string; } export const ContactEmail = ({ name, email, message, subject = "New Contact Form Submission", productName, }: ContactEmailProps) => ( {subject} {subject} {productName && ( Product Inquiry: {productName} )}

Name: {name} Email: {email}

Message: {message}

This email was sent from the contact form on klz-cables.com ); export default ContactEmail; const main = { backgroundColor: "#f6f9fc", fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', }; const container = { backgroundColor: "#ffffff", margin: "0 auto", padding: "20px 0 48px", marginBottom: "64px", }; const section = { padding: "0 48px", }; const h1 = { color: "#333", fontSize: "24px", fontWeight: "bold", padding: "0 48px", margin: "30px 0", }; const text = { color: "#333", fontSize: "16px", lineHeight: "24px", textAlign: "left" as const, }; const messageText = { ...text, backgroundColor: "#f4f4f4", padding: "15px", borderRadius: "4px", whiteSpace: "pre-wrap" as const, }; const hr = { borderColor: "#e6ebf1", margin: "20px 0", }; const footer = { color: "#8898aa", fontSize: "12px", lineHeight: "16px", textAlign: "center" as const, marginTop: "20px", };