|
1 | 1 | import { tedxsjecAssetsPrefix } from "@/lib/utils";
|
2 | 2 | import {
|
3 |
| - Body, |
4 |
| - Button, |
5 |
| - Container, |
6 |
| - Head, |
7 |
| - Heading, |
8 |
| - Hr, |
9 |
| - Html, |
10 |
| - Img, |
11 |
| - Preview, |
12 |
| - Section, |
13 |
| - Text, |
| 3 | + Body, |
| 4 | + Button, |
| 5 | + Container, |
| 6 | + Head, |
| 7 | + Heading, |
| 8 | + Hr, |
| 9 | + Html, |
| 10 | + Img, |
| 11 | + Preview, |
| 12 | + Section, |
| 13 | + Text, |
14 | 14 | } from "@react-email/components";
|
15 | 15 | import { Tailwind } from "@react-email/tailwind";
|
16 | 16 |
|
17 | 17 | interface TedxRegistrationEmailProps {
|
18 |
| - name?: string; |
19 |
| - registrationLink: string; |
| 18 | + name?: string; |
| 19 | + registrationLink: string; |
20 | 20 | }
|
21 | 21 |
|
22 |
| -export const TedxRegistrationEmail = ({ name, registrationLink }: TedxRegistrationEmailProps) => { |
23 |
| - const previewText = `TEDxSJEC Talk Registration Successful!`; |
| 22 | +export const TedxRegistrationEmail = ({ |
| 23 | + name, |
| 24 | + registrationLink, |
| 25 | +}: TedxRegistrationEmailProps) => { |
| 26 | + const previewText = `TEDxSJEC Talk Registration Successful!`; |
24 | 27 |
|
25 |
| - return ( |
26 |
| - <Html> |
27 |
| - <Head /> |
28 |
| - <Preview>{previewText}</Preview> |
29 |
| - <Tailwind> |
30 |
| - <Body className="bg-white my-auto mx-auto font-sans px-4"> |
31 |
| - <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]"> |
32 |
| - {/* Logo Section */} |
33 |
| - <Section className="text-center"> |
34 |
| - <Img |
35 |
| - src={`${tedxsjecAssetsPrefix}/logo/tedxsjec-logo.avif`} |
36 |
| - alt="TEDxSJEC Logo" |
37 |
| - className="mx-auto w-[150px] h-auto mb-[20px]" |
38 |
| - /> |
39 |
| - </Section> |
40 |
| - {/* Heading Section */} |
41 |
| - <Section className="mt-[32px] items-center"> |
42 |
| - <Heading className="text-black text-[24px] font-bold text-center p-0 my-[30px] mx-0"> |
43 |
| - <strong>TEDxSJEC Talk Registration Confirmed!</strong> |
44 |
| - </Heading> |
45 |
| - </Section> |
46 |
| - <Text className="text-black text-[14px] leading-[24px]"> |
47 |
| - Dear {name ?? "Participant"}, |
48 |
| - </Text> |
49 |
| - <Text className="text-black text-[14px] leading-[24px]"> |
50 |
| - We are excited to confirm your registration for TEDxSJEC Talk. <br /> |
51 |
| - You are all set to join us for an inspiring day filled with ideas worth sharing. |
52 |
| - Please bring this email on the event day for a smooth entry process. |
53 |
| - </Text> |
54 |
| - {/* QR Code Section */} |
55 |
| - <Section className="text-center mt-[32px] mb-[32px]"> |
56 |
| - <Text className="text-center"> |
57 |
| - Below is your unique QR code for registration. Kindly keep it accessible on |
58 |
| - event day for quick check-in: |
59 |
| - </Text> |
60 |
| - <Img |
61 |
| - className="mx-auto flex items-center justify-center py-4" |
62 |
| - src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${registrationLink}`} |
63 |
| - alt="QR Code" |
64 |
| - /> |
65 |
| - </Section> |
66 |
| - <Text className="text-black text-[14px] leading-[24px]"> |
67 |
| - We look forward to seeing you at TEDxSJEC! <br /> |
68 |
| - </Text> |
69 |
| - <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" /> |
70 |
| - <Text className="text-[#666666] text-[12px] leading-[24px]"> |
71 |
| - Thanks & Regards, <br /> TEDxSJEC Team <br /> |
72 |
| - For any queries, feel free to contact us at: tedxsjec@sjec.ac.in |
73 |
| - </Text> |
74 |
| - <div className="flex flex-col items-center justify-center text-[12px] space-x-4"> |
75 |
| - <Button href="https://tedxsjec.in/privacy">Privacy Policy</Button> |
76 |
| - | |
77 |
| - <Button href="https://tedxsjec.in/refund">Refund Policy</Button> |
78 |
| - | |
79 |
| - <Button href="https://tedxsjec.in/terms">Terms and Conditions</Button> |
80 |
| - </div> |
81 |
| - </Container> |
82 |
| - </Body> |
83 |
| - </Tailwind> |
84 |
| - </Html> |
85 |
| - ); |
| 28 | + return ( |
| 29 | + <Html> |
| 30 | + <Head /> |
| 31 | + <Preview>{previewText}</Preview> |
| 32 | + <Tailwind> |
| 33 | + <Body className="bg-white my-auto mx-auto font-sans px-4"> |
| 34 | + <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]"> |
| 35 | + {/* Logo Section */} |
| 36 | + <Section className="text-center"> |
| 37 | + <Img |
| 38 | + src={`${tedxsjecAssetsPrefix}/logo/tedxsjec-logo.avif`} |
| 39 | + alt="TEDxSJEC Logo" |
| 40 | + className="mx-auto w-[150px] h-auto mb-[20px]" |
| 41 | + /> |
| 42 | + </Section> |
| 43 | + {/* Heading Section */} |
| 44 | + <Section className="mt-[32px] items-center"> |
| 45 | + <Heading className="text-black text-[24px] font-bold text-center p-0 my-[30px] mx-0"> |
| 46 | + <strong>TEDxSJEC Talk Registration Confirmed!</strong> |
| 47 | + </Heading> |
| 48 | + </Section> |
| 49 | + <Text className="text-black text-[14px] leading-[24px]"> |
| 50 | + Dear {name ?? "Participant"}, |
| 51 | + </Text> |
| 52 | + <Text className="text-black text-[14px] leading-[24px]"> |
| 53 | + We are excited to confirm your registration for TEDxSJEC Talk.{" "} |
| 54 | + <br /> |
| 55 | + You are all set to join us for an inspiring day filled with ideas |
| 56 | + worth sharing. Please bring this email on the event day for a |
| 57 | + smooth entry process. |
| 58 | + </Text> |
| 59 | + {/* QR Code Section */} |
| 60 | + <Section className="text-center mt-[32px] mb-[32px]"> |
| 61 | + <Text className="text-center"> |
| 62 | + Below is your unique QR code for registration. Kindly keep it |
| 63 | + accessible on event day for quick check-in: |
| 64 | + </Text> |
| 65 | + <Img |
| 66 | + className="mx-auto flex items-center justify-center py-4" |
| 67 | + src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${registrationLink}`} |
| 68 | + alt="QR Code" |
| 69 | + /> |
| 70 | + </Section> |
| 71 | + <Text className="text-black text-[14px] leading-[24px]"> |
| 72 | + We look forward to seeing you at TEDxSJEC! <br /> |
| 73 | + </Text> |
| 74 | + <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" /> |
| 75 | + <Text className="text-[#666666] text-[12px] leading-[24px]"> |
| 76 | + Thanks & Regards, <br /> TEDxSJEC Team <br /> |
| 77 | + For any queries, feel free to contact us at: tedxsjec@sjec.ac.in |
| 78 | + </Text> |
| 79 | + <div className="flex flex-col items-center justify-center text-[12px] space-x-4"> |
| 80 | + <Button href="https://tedxsjec.in/privacy">Privacy Policy</Button> |
| 81 | + | |
| 82 | + <Button href="https://tedxsjec.in/refund">Refund Policy</Button> |
| 83 | + | |
| 84 | + <Button href="https://tedxsjec.in/terms"> |
| 85 | + Terms and Conditions |
| 86 | + </Button> |
| 87 | + </div> |
| 88 | + </Container> |
| 89 | + </Body> |
| 90 | + </Tailwind> |
| 91 | + </Html> |
| 92 | + ); |
86 | 93 | };
|
87 | 94 |
|
88 | 95 | export default TedxRegistrationEmail;
|
0 commit comments