{"size": 2285, "ext": "js", "max_stars_repo_path": "src/app/pages/Home/PanelComponent.js", "max_stars_repo_name": "EvanMorrison/lt4w-react-markdown", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/app/pages/Home/PanelComponent.js", "max_issues_repo_name": "EvanMorrison/lt4w-react-markdown", "max_issues_repo_issues_event_min_datetime": "2021-10-05T20:02:27.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T08:53:28.000Z", "max_forks_repo_path": "src/app/pages/Home/PanelComponent.js", "max_forks_repo_name": "EvanMorrison/lt4w-react-markdown", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 23.0808080808, "max_line_length": 187, "alphanum_fraction": 0.6376367615}
import React from 'react';
import styled from '@emotion/styled';
import { PropTypes } from 'prop-types';
import { rgba } from 'polished';
import { Column } from '../../AppStyles';

const Panel = styled.div`
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: ${props => rgba(props.theme.primary, 0.7)};
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease-out;

  &:hover {
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
  }

  @media screen and (max-width: 1099px) {
    flex: 0 0 30%;
    width: 90%;
    max-width: 400px;
    margin-bottom: 40px;
  }

  @media screen and (min-width: 1100px) {
    flex: 0 0 30%;
    max-width: 400px;
    height: 550px;
  }
`;

const PanelHeading = styled.h2`
  width: 100%;
  height: 84px;
  line-height: 84px;
  font-family: ${props => props.theme.titleFont};
  font-size: 3em;
  text-align: center;
  color: ${props => props.color};
  text-shadow: 1px 1px #222244;
  background-image: linear-gradient(to bottom, ${props => rgba(props.theme.primary, 0.4)}, ${props => rgba(props.theme.primary, 0.4)} 10%, ${props => rgba(props.theme.primary, 0.5)} 90%);
`;

const PanelImg = styled.img`
  max-height: 250px;
  min-width: 100%;

  @media screen and (max-width: 1099px) {
    max-height: 200px;
    min-width: auto;
    position: relative;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
`;

const PanelContent = styled(Column)`
  padding: 20px 40px;
  margin-bottom: 20px;
`;

const PanelText = styled.p`
  font-family: ${props => props.theme.bodyFont};
  ${''/* text-align: justify; */}
  font-size: 1.2em;
  font-weight: 300;
  opacity: 0.87;
  line-height: 1.5em;
`;

const PanelComponent = ({props, color, onClick}) => (
  <Panel onClick={onClick}>
    <PanelHeading color={color}>
      <em>{props.title}</em>
    </PanelHeading>
    <PanelImg src={props.image} alt=""/>
    <PanelContent>
      <PanelText>{props.text} </PanelText>
    </PanelContent>
  </Panel>
);

PanelComponent.propTypes = {
  color: PropTypes.string,
  image: PropTypes.string,
  onClick: PropTypes.func,
  props: PropTypes.object,
  subtitle: PropTypes.string,
  text: PropTypes.string,
  title: PropTypes.string,
};

export default PanelComponent;
