58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Html,
|
|
Head,
|
|
Body,
|
|
Container,
|
|
Section,
|
|
Text,
|
|
Heading,
|
|
Tailwind,
|
|
} from "@react-email/components";
|
|
|
|
const OTPEmail = (props: { otpCode: string }) => {
|
|
return (
|
|
<Html lang="en" dir="ltr">
|
|
<Tailwind>
|
|
<Head />
|
|
<Body className="bg-white font-sans">
|
|
<Container className="bg-white max-w-[600px] mx-auto px-[40px] py-[40px]">
|
|
<Heading className="text-gray-900 text-[24px] font-bold mb-[24px]">
|
|
Verification code
|
|
</Heading>
|
|
|
|
<Text className="text-gray-800 text-[16px] leading-[24px] mb-[24px]">
|
|
Enter the following verification code when prompted:
|
|
</Text>
|
|
|
|
<Text className="text-[32px] font-bold text-gray-900 font-mono mb-[24px]">
|
|
{props.otpCode}
|
|
</Text>
|
|
|
|
<Text className="text-gray-800 text-[16px] leading-[24px] mb-[40px]">
|
|
To protect your account, do not share this code.
|
|
</Text>
|
|
|
|
{/* Footer */}
|
|
<Section className="border-t border-gray-200 pt-[24px]">
|
|
<Text className="text-gray-500 text-[12px] leading-[16px] m-0">
|
|
Autumn
|
|
<br />
|
|
2261 Market Street STE 22390
|
|
<br />
|
|
San Francisco, CA, US, 94114
|
|
</Text>
|
|
</Section>
|
|
</Container>
|
|
</Body>
|
|
</Tailwind>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
OTPEmail.PreviewProps = {
|
|
otpCode: "884085",
|
|
};
|
|
|
|
export default OTPEmail;
|