mirror of
https://github.com/elyby/emails-renderer.git
synced 2024-11-08 13:42:43 +05:30
Отделяем шапку письма в отдельный компонент
This commit is contained in:
parent
14e84d4172
commit
73734c10c1
28
src/components/header/Header.jsx
Normal file
28
src/components/header/Header.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Table } from 'components/table';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import { PropTypes } from 'react';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
import messages from './messages.intl.json';
|
||||
|
||||
export default function Userbar({username, title}) {
|
||||
return (
|
||||
<Table style={styles.headerImage}>
|
||||
<tr>
|
||||
<td style={styles.headerTextContainer}>
|
||||
<div style={styles.welcomeUsername}>
|
||||
<Message {...messages.hello_username} values={{username}} />
|
||||
</div>
|
||||
|
||||
{title}
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
Userbar.propTypes = {
|
||||
username: PropTypes.string,
|
||||
title: PropTypes.node
|
||||
};
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
1
src/components/header/index.js
Normal file
1
src/components/header/index.js
Normal file
@ -0,0 +1 @@
|
||||
export Header from './Header';
|
3
src/components/header/messages.intl.json
Normal file
3
src/components/header/messages.intl.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"hello_username": "Hello, {username}"
|
||||
}
|
16
src/components/header/styles.js
Normal file
16
src/components/header/styles.js
Normal file
@ -0,0 +1,16 @@
|
||||
import background from './background.jpg';
|
||||
|
||||
export default {
|
||||
headerImage: {
|
||||
height: '200px',
|
||||
backgroundImage: `url(${background})`
|
||||
},
|
||||
headerTextContainer: {
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
welcomeUsername: {
|
||||
fontSize: '20px'
|
||||
},
|
||||
};
|
@ -4,6 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
|
||||
|
||||
import { Userbar } from 'components/userbar';
|
||||
import { Table } from 'components/table';
|
||||
import { Header } from 'components/header';
|
||||
import { Button } from 'components/button';
|
||||
import { Input } from 'components/input';
|
||||
import { BitmapText } from 'components/text';
|
||||
@ -19,19 +20,12 @@ export default function Register({username, link, code}) {
|
||||
return (
|
||||
<div>
|
||||
<Userbar />
|
||||
<Table style={styles.headerImage}>
|
||||
<tr>
|
||||
<td style={styles.headerTextContainer}>
|
||||
<div style={styles.welcomeUsername}>
|
||||
<Message {...messages.hello_username} values={{username}} />
|
||||
</div>
|
||||
|
||||
<BitmapText message={messages.welcome_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
<Header username={username} title={
|
||||
<BitmapText message={messages.welcome_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
} />
|
||||
|
||||
<div style={styles.content}>
|
||||
<Table>
|
||||
|
@ -1,5 +1,4 @@
|
||||
{
|
||||
"hello_username": "Hello, {username}",
|
||||
"welcome_image": "Welcome to Ely.by",
|
||||
"we_glad_to_see_you": "We glad to see you among the users of Ely.by. You almost reached the final point, it remains only to confirm your E-mail address.For doing it, please push a button under the text.",
|
||||
"confirm_email_image": "Confirm E‑mail",
|
||||
|
@ -1,19 +1,4 @@
|
||||
import background from './images/headerBackground.jpg';
|
||||
|
||||
export default {
|
||||
headerImage: {
|
||||
height: '200px',
|
||||
backgroundImage: `url(${background})`
|
||||
},
|
||||
headerTextContainer: {
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
welcomeUsername: {
|
||||
fontSize: '20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
background: '#fff',
|
||||
padding: '50px',
|
||||
|
Loading…
Reference in New Issue
Block a user