Saifadin

<div class="tSlider">
  <div class="tSlider--image-wrapper">
    <img src="//cdn.shopify.com/s/files/1/0116/9562/0160/t/3/assets/bg.png?7092974999273233205" class="tSlider--image">
  </div>
  <div class="tSlider--sliderText">
    <h1 class="tSlider--headline">Fun stuff</h1>
    <span class="tSlider--subHeadline">
      This is a React example without any transpiling <b>with a bold text</b>. ❤️
    </span>
  </div>

Saifadin

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script>
  const e = React.createElement;

  function SliderImage() {
    return e('div', { className: 'tSlider--image-wrapper' }, e('img', { src: '//cdn.shopify.com/s/files/1/0116/9562/0160/t/3/assets/bg.png?7092974999273233205', className: 'tSlider--image' }));
  };

Saifadin

(window.webpackJsonp = window.webpackJsonp || []).push([[5], {
    1271: function(t, e, r) {
        (function(t) {
            var r, n, o, i;
            function a(t) {
                return (a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
                    return typeof t
                }
                : function(t) {
                    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t

Saifadin

export {
  codeTheme: {
    def: `#ffe036`,
    property: `#9effe5`,
    keyword: `#66b8ff`,
    string: `#9effe5`,
    punctuation: `#5c7180`,
    comment: `#5c7180`,
    background: `#241236`,
    editorBackground: `#2c1742`,

Saifadin

import { useState, useEffect } from 'react';

export const useTypeWriter = (text, startNow = true, speed = 100, skip) => {
  const [toBeTyped] = useState(text);
  const [displayedText, setDisplayedText] = useState('');
  const [isDone, setIsDone] = useState(false);
  const [intervalId, setIntervalId] = useState(null);

  useEffect(
    () => {

Saifadin

import { renderEmail } from 'postonents';
import EmailContainer from '@company/email-templates';

// EmailContainer is the entry point for the service and it gets the data passed to it
const html = await renderEmail(EmailContainer, { lang: lang.toLowerCase(), template, emailData: data });

// generic send function
sendEmail(html);

Saifadin

import React from 'react';

import { getEmail } from './utils';

/** utils.js
import { AccountUserDeleted } from './emails';

export const getEmail = name => {
  switch (name) {
    case 'ACCOUNT_USER_DELETED':

Saifadin

import { renderEmail } from 'postonents';
import VerificationCodeMail from './templates/VerificationCode';

...

// Get your email templates, pass it as the entry point for the server side rendering
// data in this case should align with the data needed in the template
const html = renderEmail(VerificationCodeMail, { lang: 'en', data });

// This is just a generic send function

Saifadin

import React from 'react';

import { Email, Container, Row, Column, Header, FullWidth, Footer, Text, Link, PostonentsProvider } from 'postonents';

// Data here represents the Example Data we might get passed to from the backend.
// This can be anything and you need, you have to define it beforehand
const VerificationEmail = ({ lang, data }) => {
  const { verifyToken, email } = data;
  return (
    <PostonentsProvider theme={{ typo: { fontFamily: 'Roboto, sans-serif' } }}>

Saifadin

export const Panel = styled('div')`
  max-width: 1200px;
  width: 100%;
  margin-bottom: ${({ theme: { spacing } }) => spacing}px;
  @media screen and (max-width: 768px) {
    max-width: 400px;
  }
`;