feat(spacer): Extend Spacer API
This commit is contained in:
@ -1,7 +1,22 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
const Spacer = () => (
|
const styles = { padding: '15px 0', height: '1px' };
|
||||||
<div className='spacer' style={{ marginTop: '50px', marginBottom: '50px' }} />
|
|
||||||
);
|
const Comp = props => <div className='spacer' style={styles} {...props} />;
|
||||||
|
|
||||||
|
const Spacer = ({ size = 1 }) =>
|
||||||
|
size === 1 ? (
|
||||||
|
<Comp />
|
||||||
|
) : (
|
||||||
|
'#'
|
||||||
|
.repeat(size)
|
||||||
|
.split('')
|
||||||
|
.map((_, i) => <Comp key={`spacer_${i}`} />)
|
||||||
|
);
|
||||||
|
|
||||||
|
Spacer.propTypes = {
|
||||||
|
size: PropTypes.number
|
||||||
|
};
|
||||||
|
|
||||||
export default Spacer;
|
export default Spacer;
|
||||||
|
@ -101,7 +101,6 @@ function Welcome({
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<Spacer />
|
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm={8} smOffset={2} xs={12}>
|
<Col sm={8} smOffset={2} xs={12}>
|
||||||
<p className='stats'>
|
<p className='stats'>
|
||||||
@ -125,7 +124,6 @@ function Welcome({
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<Spacer />
|
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm={8} smOffset={2} xs={12}>
|
<Col sm={8} smOffset={2} xs={12}>
|
||||||
<Button block={true} bsStyle='primary' className='btn-cta-big'>
|
<Button block={true} bsStyle='primary' className='btn-cta-big'>
|
||||||
@ -133,11 +131,7 @@ function Welcome({
|
|||||||
</Button>
|
</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Spacer />
|
<Spacer size={4}/>
|
||||||
<Spacer />
|
|
||||||
<Spacer />
|
|
||||||
<Spacer />
|
|
||||||
<Spacer />
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
Reference in New Issue
Block a user