-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Refactor TedxRegistrationEmail component
- Loading branch information
1 parent
619941c
commit 11e3aa3
Showing
1 changed file
with
79 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,91 @@ | ||
| import { tedxsjecAssetsPrefix } from "@/lib/utils"; | ||
| import { | ||
| Body, | ||
| Button, | ||
| Container, | ||
| Head, | ||
| Heading, | ||
| Hr, | ||
| Html, | ||
| Img, | ||
| Preview, | ||
| Section, | ||
| Text, | ||
| Body, | ||
| Button, | ||
| Container, | ||
| Head, | ||
| Heading, | ||
| Hr, | ||
| Html, | ||
| Img, | ||
| Preview, | ||
| Section, | ||
| Text, | ||
| } from "@react-email/components"; | ||
| import { Tailwind } from "@react-email/tailwind"; | ||
|
|
||
| interface TedxRegistrationEmailProps { | ||
| name?: string; | ||
| registrationLink: string; | ||
| name?: string; | ||
| registrationLink: string; | ||
| } | ||
|
|
||
| export const TedxRegistrationEmail = ({ | ||
| name, | ||
| registrationLink, | ||
| }: TedxRegistrationEmailProps) => { | ||
| const previewText = `TEDxSJEC 2024 Registration Successful!`; | ||
| export const TedxRegistrationEmail = ({ name, registrationLink }: TedxRegistrationEmailProps) => { | ||
| const previewText = `TEDxSJEC 2024 Registration Successful!`; | ||
|
|
||
| return ( | ||
| <Html> | ||
| <Head /> | ||
| <Preview>{previewText}</Preview> | ||
| <Tailwind> | ||
| <Body className="bg-white my-auto mx-auto font-sans px-4"> | ||
| <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]"> | ||
| {/* Logo Section */} | ||
| <Section className="text-center"> | ||
| <Img | ||
| src={`${tedxsjecAssetsPrefix}/logo/tedxsjec-logo.avif`} | ||
| alt="TEDxSJEC Logo" | ||
| className="mx-auto w-[150px] h-auto mb-[20px]" | ||
| /> | ||
| </Section> | ||
| {/* Heading Section */} | ||
| <Section className="mt-[32px] items-center"> | ||
| <Heading className="text-black text-[24px] font-bold text-center p-0 my-[30px] mx-0"> | ||
| <strong>TEDxSJEC 2024 Registration Confirmed!</strong> | ||
| </Heading> | ||
| </Section> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| Dear {name ?? "Participant"}, | ||
| </Text> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| We are excited to confirm your registration for TEDxSJEC Talk.{" "} | ||
| <br /> | ||
| You are all set to join us for an inspiring day filled with ideas | ||
| worth sharing. Please bring this email on the event day for a | ||
| smooth entry process. | ||
| </Text> | ||
| {/* QR Code Section */} | ||
| <Section className="text-center mt-[32px] mb-[32px]"> | ||
| <Text className="text-center"> | ||
| Below is your unique QR code for registration. Kindly keep it | ||
| accessible on event day for quick check-in: | ||
| </Text> | ||
| <Img | ||
| className="mx-auto flex items-center justify-center py-4" | ||
| src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${registrationLink}`} | ||
| alt="QR Code" | ||
| /> | ||
| </Section> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| We look forward to seeing you at TEDxSJEC! <br /> | ||
| </Text> | ||
| <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" /> | ||
| <Text className="text-[#666666] text-[12px] leading-[24px]"> | ||
| Thanks & Regards, <br /> TEDxSJEC Team <br /> | ||
| For any queries, feel free to contact us at: [email protected] | ||
| </Text> | ||
| <div className="flex flex-col items-center justify-center text-[12px] space-x-4"> | ||
| <Button href="https://tedxsjec.in/privacy">Privacy Policy</Button> | ||
| | | ||
| <Button href="https://tedxsjec.in/refund">Refund Policy</Button> | ||
| | | ||
| <Button href="https://tedxsjec.in/terms"> | ||
| Terms and Conditions | ||
| </Button> | ||
| </div> | ||
| </Container> | ||
| </Body> | ||
| </Tailwind> | ||
| </Html> | ||
| ); | ||
| return ( | ||
| <Html> | ||
| <Head /> | ||
| <Preview>{previewText}</Preview> | ||
| <Tailwind> | ||
| <Body className="bg-white my-auto mx-auto font-sans px-4"> | ||
| <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]"> | ||
| {/* Logo Section */} | ||
| <Section className="text-center"> | ||
| <Img | ||
| src={`${tedxsjecAssetsPrefix}/logo/tedxsjec-logo.avif`} | ||
| alt="TEDxSJEC Logo" | ||
| className="mx-auto w-[150px] h-auto mb-[20px]" | ||
| /> | ||
| </Section> | ||
| {/* Heading Section */} | ||
| <Section className="mt-[32px] items-center"> | ||
| <Heading className="text-black text-[24px] font-bold text-center p-0 my-[30px] mx-0"> | ||
| <strong>TEDxSJEC 2024 Registration Confirmed!</strong> | ||
| </Heading> | ||
| </Section> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| Dear {name ?? "Participant"}, | ||
| </Text> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| We are excited to confirm your registration for TEDxSJEC 2024. <br /> | ||
| You are all set to join us for an inspiring day filled with ideas worth sharing. | ||
| Please bring this email on the event day for a smooth entry process. | ||
| </Text> | ||
| {/* QR Code Section */} | ||
| <Section className="text-center mt-[32px] mb-[32px]"> | ||
| <Text className="text-center"> | ||
| Below is your unique QR code for registration. Kindly keep it accessible on | ||
| event day for quick check-in: | ||
| </Text> | ||
| <Img | ||
| className="mx-auto flex items-center justify-center py-4" | ||
| src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${registrationLink}`} | ||
| alt="QR Code" | ||
| /> | ||
| </Section> | ||
| <Text className="text-black text-[14px] leading-[24px]"> | ||
| We look forward to seeing you at TEDxSJEC! <br /> | ||
| </Text> | ||
| <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" /> | ||
| <Text className="text-[#666666] text-[12px] leading-[24px]"> | ||
| Thanks & Regards, <br /> TEDxSJEC Team <br /> | ||
| For any queries, feel free to contact us at:{" "} | ||
| <a href="mailto:[email protected]" className="text-[#0073e6] underline"> | ||
| [email protected] | ||
| </a> | ||
| </Text> | ||
| <div className="flex flex-col items-center justify-center text-[12px] space-x-4"> | ||
| <Button href="https://tedxsjec.in/privacy">Privacy Policy</Button> | ||
| | | ||
| <Button href="https://tedxsjec.in/refund">Refund Policy</Button> | ||
| | | ||
| <Button href="https://tedxsjec.in/terms">Terms and Conditions</Button> | ||
| </div> | ||
| </Container> | ||
| </Body> | ||
| </Tailwind> | ||
| </Html> | ||
| ); | ||
| }; | ||
|
|
||
| export default TedxRegistrationEmail; |