{"size": 660, "ext": "js", "max_stars_repo_path": "src/components/Preview/Square/index.js", "max_stars_repo_name": "SocialSchools/socs-react-lib", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Preview/Square/index.js", "max_issues_repo_name": "SocialSchools/socs-react-lib", "max_issues_repo_issues_event_min_datetime": "2020-12-18T18:23:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-14T15:30:30.000Z", "max_forks_repo_path": "src/components/Preview/Square/index.js", "max_forks_repo_name": "SocialSchools/socs-react-lib", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 14.0425531915, "max_line_length": 39, "alphanum_fraction": 0.6}
/**
*
* Square
*
*/

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Outer = styled.div`
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-bottom: ${(p) => p.aspect};
  }
`;

const Inner = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
`;

function Square(props) {
  const { aspect, ...rest } = props;
  return (
    <Outer aspect={aspect}>
      <Inner {...rest} />
    </Outer>
  );
}

Square.propTypes = {
  aspect: PropTypes.string,
};

Square.defaultProps = {
  aspect: '100%',
};

export default Square;
