cohabit_mail/templates/Welcome.tsx

163 lines
3.8 KiB
TypeScript
Raw Permalink Normal View History

import {
Body,
Button,
Container,
Heading,
Html,
Img,
Preview,
Section,
Text,
} from 'jsx-email'
import { Signature } from './components/Signature.tsx'
import type { Template } from '../types.ts'
import type { JSX } from 'preact'
import { bodyCss, messageCss, rootCss, textCss } from './styles/base.tsx'
import { BaseStyle } from './styles/base.tsx'
function Welcome(
{ firstname, lastname, login }: {
firstname: string
lastname: string
login: string
},
) {
return (
<Html lang='fr' style={{ fontSize: '14px' }}>
<BaseStyle />
<Preview>Bienvenue au FabLab Coh@bit</Preview>
<Body style={bodyCss}>
<Container style={messageCss}>
<Section>
<Heading as='h1' style={headingCss}>
Bienvenue au<Img
src='https://cohabit.fr/images/logo.svg'
alt='FabLab Cohabit'
style={imgCss}
/>
</Heading>
<Text style={textCss}>
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que{' '}
{firstname} {lastname}.
</Text>
<Text style={textCss}>
Votre identifiant est <span style={preCss}>{login}</span>.
</Text>
<Text style={textCss}>
Laissez parler votre créativité, vous êtes prêt à collaborer avec
toute une communauté ouverte et accueillante.
</Text>
<Text style={textCss}>
Par commencer ?
</Text>
<ul style={{ fontSize: '1rem' }}>
<li>
Accéder au <a href='https://cohabit.fr'>site de Coh@bit</a>{' '}
et découvrir le FabLab.
</li>
<li>
Découvrir et participer aux{' '}
<a href='https://cohabit.fr/projets'>projets en cours</a>{' '}
au FabLab.
</li>
<li>
Explorer les{' '}
<a href='https://git.cohabit.fr'>sources et archives</a>{' '}
du FabLab.
</li>
<li>
Se documenter et parcourrir le{' '}
<a href='https://projets.cohabit.fr'>wiki</a> du FabLab.
</li>
<li>
Visionner les{' '}
<a href='https://toot.aquilenet.fr/@cohabit_fablab@tube.aquilenet.fr'>
tutoriels vidéos
</a>{' '}
du FabLab.
</li>
<li>
<a href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'>
Échanger et communiquer
</a>{' '}
avec les autres usagers du FabLab.
</li>
</ul>
<Container
style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
>
<Button href='https://cohabit.fr/profil' style={buttonCss}>
Accéder à mon compte
</Button>
</Container>
</Section>
</Container>
<Signature />
</Body>
</Html>
)
}
const headingCss: JSX.CSSProperties = {
fontFamily: 'Garamond, serif',
color: rootCss.accentColor,
textAlign: 'center',
margin: '-1rem 0 3rem',
fontSize: '2.5rem',
}
const preCss: JSX.CSSProperties = {
fontFamily: 'monospace',
fontSize: '1rem',
padding: '0.2rem',
borderRadius: '0.4rem',
backgroundColor: rootCss.backgroundColor,
}
const buttonCss: JSX.CSSProperties = {
color: 'white',
padding: '1rem',
borderRadius: '0.4rem',
fontSize: '1.2rem',
backgroundColor: rootCss.accentColor,
}
const imgCss: JSX.CSSProperties = {
display: 'inline',
padding: '1rem',
transform: 'translateY(40%)',
}
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {
props: [
{
name: 'Prénom',
description: "Prénom de l'usager.",
required: true,
multiline: false,
tag: 'firstname',
},
{
name: 'Nom',
description: "Nom de famille de l'usager.",
required: true,
multiline: false,
tag: 'lastname',
},
{
name: 'Login',
description: "Login de l'usager.",
required: true,
multiline: false,
tag: 'login',
},
],
name: 'welcome',
description: 'Coh@bit welcome mail for new users.',
builder: Welcome,
}
export default template