Jack Mallers
7 years ago
6 changed files with 77 additions and 84 deletions
@ -1,57 +1,55 @@ |
|||||
import React, { Component } from 'react' |
import React from 'react' |
||||
import PropTypes from 'prop-types' |
import PropTypes from 'prop-types' |
||||
import Isvg from 'react-inlinesvg' |
import Isvg from 'react-inlinesvg' |
||||
import zapLogo from 'icons/zap_logo.svg' |
import zapLogo from 'icons/zap_logo.svg' |
||||
import styles from './FormContainer.scss' |
import styles from './FormContainer.scss' |
||||
|
|
||||
const FormContainer = ({ title, description, back, next, children }) => { |
const FormContainer = ({ title, description, back, next, children }) => ( |
||||
return ( |
<div className={styles.container}> |
||||
<div className={styles.container}> |
<div className={styles.titleBar} /> |
||||
<div className={styles.titleBar} /> |
|
||||
|
|
||||
<header className={styles.header}> |
<header className={styles.header}> |
||||
|
<section> |
||||
|
<Isvg src={zapLogo} /> |
||||
|
</section> |
||||
|
<section /> |
||||
|
</header> |
||||
|
|
||||
|
<div className={styles.info}> |
||||
|
<h1>{title}</h1> |
||||
|
<p>{description}</p> |
||||
|
</div> |
||||
|
|
||||
|
<div className={styles.content}> |
||||
|
{children} |
||||
|
</div> |
||||
|
|
||||
|
<footer className={styles.footer}> |
||||
|
<div className={styles.buttonsContainer}> |
||||
<section> |
<section> |
||||
<Isvg src={zapLogo} /> |
{ |
||||
|
back && <div onClick={back}>Back</div> |
||||
|
} |
||||
</section> |
</section> |
||||
<section> |
<section> |
||||
|
{ |
||||
|
next && <div onClick={next}>Next</div> |
||||
|
} |
||||
</section> |
</section> |
||||
</header> |
|
||||
|
|
||||
<div className={styles.info}> |
|
||||
<h1>{title}</h1> |
|
||||
<p>{description}</p> |
|
||||
</div> |
</div> |
||||
|
</footer> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
<div className={styles.content}> |
|
||||
{children} |
|
||||
</div> |
|
||||
|
|
||||
<footer className={styles.footer}> |
|
||||
<div className={styles.buttonsContainer}> |
|
||||
<section> |
|
||||
{ |
|
||||
back && <div onClick={back}>Back</div> |
|
||||
} |
|
||||
</section> |
|
||||
<section> |
|
||||
{ |
|
||||
next && <div onClick={next}>Next</div> |
|
||||
} |
|
||||
</section> |
|
||||
</div> |
|
||||
</footer> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
FormContainer.propTypes = { |
FormContainer.propTypes = { |
||||
title: PropTypes.string.isRequired, |
title: PropTypes.string.isRequired, |
||||
description: PropTypes.string.isRequired, |
description: PropTypes.string.isRequired, |
||||
|
|
||||
back: PropTypes.func, |
back: PropTypes.func, |
||||
next: PropTypes.func, |
next: PropTypes.func, |
||||
|
|
||||
children: PropTypes.object.isRequired |
children: PropTypes.object.isRequired |
||||
} |
} |
||||
|
|
||||
export default FormContainer |
export default FormContainer |
||||
|
@ -1,3 +1,3 @@ |
|||||
import Onboarding from './Onboarding' |
import Onboarding from './Onboarding' |
||||
|
|
||||
export default Onboarding |
export default Onboarding |
||||
|
Loading…
Reference in new issue