From 82b34147d9c9dbbf83124393ba5bf96abb1eb467 Mon Sep 17 00:00:00 2001 From: Zack Stickles <zstickles@gmail.com> Date: Fri, 5 Jun 2020 16:01:07 -0700 Subject: [PATCH] feat: created a component that allows for side-by-side content --- src/components/SideBySide.js | 31 +++++++++++++++++++++++++++ src/components/SideBySide.module.scss | 11 ++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/components/SideBySide.js create mode 100644 src/components/SideBySide.module.scss diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js new file mode 100644 index 000000000..678ea86f4 --- /dev/null +++ b/src/components/SideBySide.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; + +import styles from './SideBySide.module.scss'; + +const SideBySide = ({ className, children, type, dir }) => { + const childObjects = React.Children.toArray(children); + const side = childObjects.find((child) => child?.props?.mdxType === type); + const rest = childObjects.filter((child) => child !== side); + + return ( + <div className={cx(className, styles.container)}> + <div>{rest}</div> + {side && <div>{side}</div>} + </div> + ); +}; + +SideBySide.propTypes = { + children: PropTypes.node.isRequired, + type: PropTypes.string.isRequired, + className: PropTypes.string, + dir: PropTypes.string, +}; + +SideBySide.defaultProps = { + dir: 'right', +}; + +export default SideBySide; diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss new file mode 100644 index 000000000..7155d5e97 --- /dev/null +++ b/src/components/SideBySide.module.scss @@ -0,0 +1,11 @@ +.container { + display: flex; + + div { + flex: 1; + } + + div:nth-child(2) { + margin-left: 1rem; + } +}