import { Body, Container, Head, Heading, Html, Img, Section, Text, } from "@react-email/components"; import * as React from "react"; interface AuthCodeEmailProps { validationCode: string; type: "verification" | "password-reset"; } export const AuthCodeEmail = ({ validationCode, type }: AuthCodeEmailProps) => ( ProofKit

{type === "verification" ? "Verify Your Email" : "Reset Your Password"} Enter the following code to{" "} {type === "verification" ? "verify your email" : "reset your password"}

{validationCode}

If you did not request this code, you can ignore this email. ); AuthCodeEmail.PreviewProps = { validationCode: "D7CU4GOV", type: "verification", } as AuthCodeEmailProps; export default AuthCodeEmail; const main = { backgroundColor: "#ffffff", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const container = { backgroundColor: "#ffffff", border: "1px solid #eee", borderRadius: "5px", boxShadow: "0 5px 10px rgba(20,50,70,.2)", marginTop: "20px", maxWidth: "360px", margin: "0 auto", padding: "68px 0 130px", }; const logo: React.CSSProperties = { margin: "0 auto", }; const tertiary = { color: "#0a85ea", fontSize: "11px", fontWeight: 700, fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", height: "16px", letterSpacing: "0", lineHeight: "16px", margin: "16px 8px 8px 8px", textTransform: "uppercase" as const, textAlign: "center" as const, }; const secondary = { color: "#000", display: "inline-block", fontFamily: "HelveticaNeue-Medium,Helvetica,Arial,sans-serif", fontSize: "20px", fontWeight: 500, lineHeight: "24px", marginBottom: "0", marginTop: "0", textAlign: "center" as const, padding: "0 40px", }; const codeContainer = { background: "rgba(0,0,0,.05)", borderRadius: "4px", margin: "16px auto 14px", verticalAlign: "middle", width: "280px", }; const code = { color: "#000", display: "inline-block", fontFamily: "HelveticaNeue-Bold", fontSize: "32px", fontWeight: 700, letterSpacing: "6px", lineHeight: "40px", paddingBottom: "8px", paddingTop: "8px", margin: "0 auto", width: "100%", textAlign: "center" as const, }; const paragraph = { color: "#444", fontSize: "15px", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", letterSpacing: "0", lineHeight: "23px", padding: "0 40px", margin: "0", textAlign: "center" as const, }; const link = { color: "#444", textDecoration: "underline", }; const footer = { color: "#000", fontSize: "12px", fontWeight: 800, letterSpacing: "0", lineHeight: "23px", margin: "0", marginTop: "20px", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", textAlign: "center" as const, textTransform: "uppercase" as const, };