You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
51 lines
1.1 KiB
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Isvg from 'react-inlinesvg'
|
|
import zapLogo from 'icons/zap_logo.svg'
|
|
import styles from './FormContainer.scss'
|
|
|
|
const FormContainer = ({ title, description, back, next, children }) => {
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.titleBar} />
|
|
|
|
<header className={styles.header}>
|
|
<section>
|
|
<Isvg src={zapLogo} />
|
|
</section>
|
|
<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>
|
|
{
|
|
back && <div>Back</div>
|
|
}
|
|
</section>
|
|
<section>
|
|
{
|
|
next && <div>Next</div>
|
|
}
|
|
</section>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
FormContainer.propTypes = {
|
|
children: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default FormContainer
|