resources/js/components/common/AspectBox.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3
   4 const AspectBox = ({ children, ratio }) =>
   5         <div className="aspect-box-container" style={{ paddingTop: `${1 / ratio * 100}%`}}>
   6                 <div className="aspect-box-content">
   7                         {children}
   8                 </div>
   9         </div>;
  10
  11 AspectBox.propTypes = {
  12         children: PropTypes.node,
  13         ratio: PropTypes.number,
  14 };
  15
  16 AspectBox.defaultProps = {
  17         children: null,
  18         ratio: 1,
  19 };
  20
  21 export default AspectBox;