Gishen-Email-Templates/emails/user-invite.tsx

import { Heading, Section, Text } from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Button } from './components/Button';
import { styles } from './components/styles';
import { tCommon } from './i18n/common';
import { tTemplate } from './i18n/templates';
import { resolveLocale, type Locale } from './i18n/types';
import { interpolate } from './utils/interpolate';
import { theme } from './theme';

export interface UserInviteEmailProps {
  locale?: Locale;
  orgName?: string;
  inviterName?: string;
  role?: string;
  inviteUrl?: string;
}

export const UserInviteEmail = ({
  locale,
  orgName = 'Yaltopia Tech',
  inviterName = 'Meron Hailu',
  role = 'Member',
  inviteUrl = `${theme.brand.website}/invite`,
}: UserInviteEmailProps) => {
  const l = resolveLocale(locale);
  const t = tTemplate('user-invite', l);
  const common = tCommon(l);
  return (
    <EmailLayout preview={interpolate(t.preview, { orgName })} locale={l}>
      <Heading style={styles.heading}>{interpolate(t.heading, { orgName })}</Heading>
      <Text style={styles.text}>{interpolate(t.body1, { inviterName, role })}</Text>
      <Section style={styles.buttonSection}>
        <Button href={inviteUrl}>{t.cta}</Button>
      </Section>
      <Text style={styles.muted}>{t.body2}</Text>
      <Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
    </EmailLayout>
  );
};

UserInviteEmail.PreviewProps = { locale: 'en' } as UserInviteEmailProps;
export default UserInviteEmail;