58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import * as React from "react";
|
|
import { Heading, Text } from "@react-email/components";
|
|
import { ClientLayout } from "../layouts/ClientLayout";
|
|
|
|
export interface ConfirmationMessageProps {
|
|
name: string;
|
|
clientName: string;
|
|
clientLogo?: string;
|
|
brandColor?: string;
|
|
}
|
|
|
|
export const ConfirmationMessage = ({
|
|
name,
|
|
clientName,
|
|
clientLogo,
|
|
brandColor,
|
|
}: ConfirmationMessageProps) => {
|
|
const preview = `Thank you for your message, ${name}`;
|
|
|
|
return (
|
|
<ClientLayout
|
|
preview={preview}
|
|
clientName={clientName}
|
|
clientLogo={clientLogo}
|
|
brandColor={brandColor}
|
|
>
|
|
<Heading style={h1}>Thank You</Heading>
|
|
<Text style={text}>Hello {name},</Text>
|
|
<Text style={text}>
|
|
Thank you for contacting us. We have received your message and will get
|
|
back to you as soon as possible.
|
|
</Text>
|
|
<Text style={text}>
|
|
Best regards,
|
|
<br />
|
|
The {clientName} Team
|
|
</Text>
|
|
</ClientLayout>
|
|
);
|
|
};
|
|
|
|
export default ConfirmationMessage;
|
|
|
|
const h1 = {
|
|
fontSize: "28px",
|
|
fontWeight: "900",
|
|
margin: "0 0 16px",
|
|
color: "#ffffff",
|
|
letterSpacing: "-0.04em",
|
|
};
|
|
|
|
const text = {
|
|
fontSize: "16px",
|
|
lineHeight: "24px",
|
|
color: "#cccccc",
|
|
margin: "16px 0",
|
|
};
|