Marc Mintel
a0cfa8ef62
All checks were successful
Build & Deploy KLZ Cables / deploy (push) Successful in 5m8s
116 lines
2.2 KiB
TypeScript
116 lines
2.2 KiB
TypeScript
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) => (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{subject}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>{subject}</Heading>
|
|
{productName && (
|
|
<Text style={text}>
|
|
<strong>Product Inquiry:</strong> {productName}
|
|
</Text>
|
|
)}
|
|
<Section style={section}>
|
|
<Text style={text}>
|
|
<strong>Name:</strong> {name}
|
|
</Text>
|
|
<Text style={text}>
|
|
<strong>Email:</strong> {email}
|
|
</Text>
|
|
<Hr style={hr} />
|
|
<Text style={text}>
|
|
<strong>Message:</strong>
|
|
</Text>
|
|
<Text style={messageText}>{message}</Text>
|
|
</Section>
|
|
<Hr style={hr} />
|
|
<Text style={footer}>
|
|
This email was sent from the contact form on klz-cables.com
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
|
|
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",
|
|
};
|