119 lines
2.5 KiB
TypeScript
119 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { Heading, Section, Text, Row, Column } from "@react-email/components";
|
|
import { MintelLayout } from "../layouts/MintelLayout";
|
|
|
|
export interface ContactFormNotificationProps {
|
|
name: string;
|
|
email: string;
|
|
message: string;
|
|
productName?: string;
|
|
}
|
|
|
|
export const ContactFormNotification = ({
|
|
name,
|
|
email,
|
|
message,
|
|
productName,
|
|
}: ContactFormNotificationProps) => {
|
|
const preview = `New message from ${name}`;
|
|
|
|
return (
|
|
<MintelLayout preview={preview}>
|
|
<Heading style={h1}>New Submission</Heading>
|
|
<Text style={intro}>
|
|
A new message has been received via the contact form.
|
|
</Text>
|
|
|
|
<Section style={detailsContainer}>
|
|
<Row>
|
|
<Column style={labelCol}>
|
|
<Text style={label}>Name</Text>
|
|
</Column>
|
|
<Column>
|
|
<Text style={value}>{name}</Text>
|
|
</Column>
|
|
</Row>
|
|
<Row>
|
|
<Column style={labelCol}>
|
|
<Text style={label}>Email</Text>
|
|
</Column>
|
|
<Column>
|
|
<Text style={value}>{email}</Text>
|
|
</Column>
|
|
</Row>
|
|
{productName && (
|
|
<Row>
|
|
<Column style={labelCol}>
|
|
<Text style={label}>Product</Text>
|
|
</Column>
|
|
<Column>
|
|
<Text style={value}>{productName}</Text>
|
|
</Column>
|
|
</Row>
|
|
)}
|
|
</Section>
|
|
|
|
<Section style={messageSection}>
|
|
<Text style={label}>Message</Text>
|
|
<Text style={messageText}>{message}</Text>
|
|
</Section>
|
|
</MintelLayout>
|
|
);
|
|
};
|
|
|
|
export default ContactFormNotification;
|
|
|
|
const h1 = {
|
|
fontSize: "28px",
|
|
fontWeight: "900",
|
|
margin: "0 0 16px",
|
|
color: "#ffffff",
|
|
letterSpacing: "-0.04em",
|
|
};
|
|
|
|
const intro = {
|
|
fontSize: "16px",
|
|
color: "#888888",
|
|
margin: "0 0 32px",
|
|
};
|
|
|
|
const detailsContainer = {
|
|
backgroundColor: "#151515",
|
|
padding: "24px",
|
|
borderRadius: "8px",
|
|
marginBottom: "24px",
|
|
};
|
|
|
|
const labelCol = {
|
|
width: "100px",
|
|
};
|
|
|
|
const label = {
|
|
fontSize: "10px",
|
|
fontWeight: "900",
|
|
textTransform: "uppercase" as const,
|
|
color: "#444444",
|
|
margin: "0 0 4px",
|
|
letterSpacing: "0.1em",
|
|
};
|
|
|
|
const value = {
|
|
fontSize: "16px",
|
|
color: "#ffffff",
|
|
margin: "0 0 12px",
|
|
};
|
|
|
|
const messageSection = {
|
|
padding: "0 24px",
|
|
};
|
|
|
|
const messageText = {
|
|
fontSize: "16px",
|
|
lineHeight: "24px",
|
|
color: "#cccccc",
|
|
fontStyle: "italic",
|
|
borderLeft: "2px solid #222222",
|
|
paddingLeft: "16px",
|
|
margin: "12px 0 0",
|
|
};
|