Skip to content

Instantly share code, notes, and snippets.

@totty90
Created August 6, 2014 00:22
Show Gist options
  • Save totty90/401703294c5277a95ea1 to your computer and use it in GitHub Desktop.
Save totty90/401703294c5277a95ea1 to your computer and use it in GitHub Desktop.
React.js HTML email
define(function(require, exports, module){
var React = require('react');
var constants = require('constants');
var _ = require('underscore');
var motivationalLines = [
'Life isn’t about getting and having, it’s about giving and being.',
'Whatever the mind of man can conceive and believe, it can achieve.',
'You miss 100% of the shots you don’t take.',
'Every strike brings me closer to the next home run.',
'The mind is everything. What you think you become.',
'Winning isn’t everything, but wanting to win is.',
'You will never win if you never begin',
]
var ReactComponent = React.createClass({
render: function(){
var pStyle = {
margin : '0 auto',
lineHeight : '32px',
color : '#EFF4F8',
fontSize : 20,
padding : '5px 20px',
fontVariant : 'small-caps',
textTransform : 'lowercase',
maxWidth : 500,
textAlign : 'left',
}
return React.DOM.div({
style: {
backgroundColor : '#008FFF',
borderRadius : '10px',
textAlign : 'center',
paddingBottom : 10,
}
},
React.DOM.h1({
style: {
height : 50,
backgroundColor : '#262838',
color : '#D3E4F1',
fontVariant : 'small-caps',
fontSize : 50,
paddingBottom : 9,
margin : 0,
borderRadius : '10px 10px 0 0',
textAlign : 'center',
}
}, React.DOM.span({
}, this.props.title),
React.DOM.span({
style: {
fontSize : 30,
color : '#9AAAB6',
paddingLeft : 10,
}
}, this.props.subTitle)
),
this.props.p.map(function(p){
return React.DOM.p({
style: pStyle
}, p)
}),
React.DOM.a({
href: constants.APP_URL + '?utm_source=email_marketing',
style: {
width : 100,
height : 100,
borderRadius : '50%',
backgroundColor : '#F5F8FA',
border : '15px solid #262838',
textAlign : 'center',
margin : '0 auto 20px auto',
padding : 8,
display : 'block',
fontSize : 55,
fontVariant : 'small-caps',
fontWeight : 'bold',
overflow : 'hidden',
lineHeight : '86px',
color : '#262838',
textDecoration : 'none',
textIndent : '-6px',
}
}, 'play'),
React.DOM.a({
href: constants.COMMUNITY_URL,
style: {
maxWidth : 500,
borderRadius : '5px',
backgroundColor : 'rgba(0, 0, 0, 0.33)',
textAlign : 'center',
margin : '0 auto 20px auto',
padding : 8,
display : 'block',
fontSize : 30,
fontVariant : 'small-caps',
fontWeight : 'bold',
overflow : 'hidden',
color : '#262838',
textDecoration : 'none',
}
}, 'go to community'),
React.DOM.p({
style: pStyle
}, "Have an amazing day (:"),
React.DOM.p({
style: pStyle
}, motivationalLines[Math.floor(Math.random()*motivationalLines.length)])
)
}
});
return ReactComponent;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment