127 lines
2.5 KiB
TypeScript
127 lines
2.5 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Hr,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
import * as React from "react";
|
|
|
|
interface UserConfirmationProps {
|
|
name: string;
|
|
messageType: string;
|
|
message: string;
|
|
}
|
|
|
|
export const UserConfirmation = ({
|
|
name,
|
|
messageType,
|
|
message,
|
|
}: UserConfirmationProps) => {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>Thank you for contacting us</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>Thank You for Contacting Us</Heading>
|
|
|
|
<Section style={section}>
|
|
<Text style={text}>Dear {name},</Text>
|
|
|
|
<Text style={text}>
|
|
We have received your message regarding "{messageType}" and will
|
|
get back to you as soon as possible.
|
|
</Text>
|
|
|
|
<Text style={messageLabel}>Here's a copy of your message:</Text>
|
|
<Text style={messageBox}>{message}</Text>
|
|
|
|
<Text style={text}>
|
|
If you have any further questions, please don't hesitate to
|
|
contact us.
|
|
</Text>
|
|
</Section>
|
|
|
|
<Hr style={hr} />
|
|
|
|
<Text style={signature}>
|
|
Best regards,
|
|
<br />
|
|
The Support Team
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
const main = {
|
|
backgroundColor: "#1C1C1C",
|
|
fontFamily:
|
|
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
|
|
};
|
|
|
|
const container = {
|
|
backgroundColor: "#2E2E2E",
|
|
margin: "0 auto",
|
|
padding: "20px 0 48px",
|
|
marginBottom: "64px",
|
|
borderRadius: "8px",
|
|
};
|
|
|
|
const section = {
|
|
padding: "0 48px",
|
|
};
|
|
|
|
const h1 = {
|
|
color: "#10B981", // Emerald-500
|
|
fontSize: "24px",
|
|
fontWeight: "bold",
|
|
margin: "40px 0",
|
|
padding: "0",
|
|
textAlign: "center" as const,
|
|
};
|
|
|
|
const text = {
|
|
color: "#FFFFFF",
|
|
fontSize: "14px",
|
|
lineHeight: "24px",
|
|
margin: "16px 0",
|
|
};
|
|
|
|
const messageLabel = {
|
|
color: "#A1A1AA", // Zinc-400
|
|
fontSize: "14px",
|
|
margin: "24px 0 8px",
|
|
};
|
|
|
|
const messageBox = {
|
|
backgroundColor: "#3F3F46", // Zinc-700
|
|
padding: "16px",
|
|
borderRadius: "4px",
|
|
color: "#FFFFFF",
|
|
fontSize: "14px",
|
|
lineHeight: "24px",
|
|
margin: "0 0 24px",
|
|
};
|
|
|
|
const hr = {
|
|
borderColor: "#3F3F46", // Zinc-700
|
|
margin: "20px 0",
|
|
};
|
|
|
|
const signature = {
|
|
color: "#FFFFFF",
|
|
fontSize: "14px",
|
|
lineHeight: "24px",
|
|
margin: "16px 0",
|
|
textAlign: "center" as const,
|
|
};
|
|
|
|
export default UserConfirmation;
|