|
| 1 | +<script setup lang="ts"> |
| 2 | +import { defineProps, withDefaults } from 'vue' |
| 3 | +import { EBody, EButton, EColumn, EContainer, EHead, EHeading, EHr, EHtml, EImg, ELink, EPreview, ERow, ESection, ETailwind, EText } from 'vue-email-edge' |
| 4 | +import { baseUrl } from '../utils/index' |
| 5 | +import Hello from './Hello.vue' |
| 6 | +
|
| 7 | +interface Props { |
| 8 | + invitedByUsername?: string |
| 9 | + teamName?: string |
| 10 | + username?: string |
| 11 | + invitedByEmail?: string |
| 12 | + inviteLink?: string |
| 13 | + inviteFromIp?: string |
| 14 | + inviteFromLocation?: string |
| 15 | +} |
| 16 | +
|
| 17 | +const props = withDefaults(defineProps<Props>(), { |
| 18 | + teamName: 'My project', |
| 19 | + username: 'John Doe', |
| 20 | + invitedByEmail: 'anpch@example.com', |
| 21 | + inviteLink: 'https://vercel.com/teams/invite/foo', |
| 22 | + inviteFromIp: '172.0.0.1', |
| 23 | + inviteFromLocation: 'San Francisco, CA', |
| 24 | +}) |
| 25 | +
|
| 26 | +const previewText = `Join ${props.invitedByUsername} on Vercel` |
| 27 | +</script> |
| 28 | + |
| 29 | +<template> |
| 30 | + <ETailwind> |
| 31 | + <EHtml> |
| 32 | + <EHead /> |
| 33 | + <EPreview>{{ previewText }}</EPreview> |
| 34 | + <EBody class="bg-white my-auto mx-auto font-sans"> |
| 35 | + <EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-7 rounded my-[40px] mx-auto max-w-[465px]"> |
| 36 | + <ESection class="mt-[32px]"> |
| 37 | + <EImg :src="baseUrl('/static/vercel-logo.png')" width="40" height="37" alt="Vercel" class="my-0 mx-auto" /> |
| 38 | + </ESection> |
| 39 | + <Hello /> |
| 40 | + <EHeading class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0"> |
| 41 | + Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong> |
| 42 | + </EHeading> |
| 43 | + <EText class="text-black text-[14px] leading-[24px]"> |
| 44 | + Hello {{ username }}, |
| 45 | + </EText> |
| 46 | + <EText class="text-black text-[14px] leading-[24px]"> |
| 47 | + <strong>bukinoshita</strong> ( |
| 48 | + <ELink :href="`mailto:${invitedByEmail}`" class="text-blue-600 no-underline"> |
| 49 | + {{ invitedByEmail }} |
| 50 | + </ELink> |
| 51 | + ) has invited you to the <strong>{{ teamName }}</strong> team on <strong>Vercel</strong>. |
| 52 | + </EText> |
| 53 | + <ESection> |
| 54 | + <ERow> |
| 55 | + <EColumn align="right"> |
| 56 | + <EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-user.png" width="64" height="64" /> |
| 57 | + </EColumn> |
| 58 | + <EColumn align="center"> |
| 59 | + <EImg src="https://vue-email-demo.vercel.app/static/vercel-arrow.png" width="12" height="9" alt="invited you to" /> |
| 60 | + </EColumn> |
| 61 | + <EColumn align="left"> |
| 62 | + <EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-team.png" width="64" height="64" /> |
| 63 | + </EColumn> |
| 64 | + </ERow> |
| 65 | + </ESection> |
| 66 | + <ESection class="text-center mt-[32px] mb-[32px]"> |
| 67 | + <EButton px="20" py="12" class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" :href="inviteLink"> |
| 68 | + Join the team |
| 69 | + </EButton> |
| 70 | + </ESection> |
| 71 | + <EText class="text-black text-[14px] leading-[24px]"> |
| 72 | + or copy and paste this URL into your browser: |
| 73 | + <ELink :href="inviteLink" class="text-blue-600 no-underline"> |
| 74 | + {{ inviteLink }} |
| 75 | + </ELink> |
| 76 | + </EText> |
| 77 | + <EHr class="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" /> |
| 78 | + <EText class="text-[#666666] text-[12px] leading-[24px]"> |
| 79 | + This invitation was intended for |
| 80 | + <span class="text-black">{{ username }} </span>.This invite was sent from <span class="text-black">{{ inviteFromIp }}</span> located in |
| 81 | + <span class="text-black">{{ inviteFromLocation }}</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch |
| 82 | + with us. |
| 83 | + </EText> |
| 84 | + </EContainer> |
| 85 | + </EBody> |
| 86 | + </EHtml> |
| 87 | + </ETailwind> |
| 88 | +</template> |
0 commit comments