mailing

2026-01-25 13:36:25 +01:00
parent ae1e0ad8a9
commit a0cfa8ef62
9 changed files with 3598 additions and 66 deletions
--- a/components/emails/ContactEmail.tsx
+++ b/components/emails/ContactEmail.tsx
@@ -0,0 +1,115 @@
+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",
+};