{"size": 1753, "ext": "js", "max_stars_repo_path": "src/components/Reviews/ReviewItem.js", "max_stars_repo_name": "yjcyun/heather_dick_portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Reviews/ReviewItem.js", "max_issues_repo_name": "yjcyun/heather_dick_portfolio", "max_issues_repo_issues_event_min_datetime": "2022-02-28T01:57:40.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T01:57:40.000Z", "max_forks_repo_path": "src/components/Reviews/ReviewItem.js", "max_forks_repo_name": "yjcyun/heather_dick_portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 18.2604166667, "max_line_length": 55, "alphanum_fraction": 0.6371933828}
import React from 'react';
import { FaQuoteLeft } from 'react-icons/fa';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';


// Props from ReviewList
const ReviewItem = ({ review }) => {
  const { author, content, role } = review;

  return (
    <ReviewItemWrapper>

      <div className="bubble-text">
        <h3 className="bubble-title">{role}</h3>
        <div className="testing">
          <FaQuoteLeft className="quote-icon" />
          <ReactMarkdown source={content} />
        </div>
        <span className="triangle"></span>
      </div>

      <p className="author">
        <span>-</span><ReactMarkdown source={author} />
      </p>
    </ReviewItemWrapper>
  )
}

const ReviewItemWrapper = styled.div`
.bubble-text {
 position: relative;
 background-color: var(--beige);
 width: auto;
 height: auto;
 border-radius: 2em;
 display: flex;
 flex-direction:column;
 justify-content: center;
 align-items: center;
 border: 3px solid var(--darkPurple);
 padding: 2rem;
 text-align:center;
}

.triangle { 
 display: block;
 height: 4rem;
 width: 4rem;
 background-color: inherit;
 border: inherit;
 position: absolute;
 bottom: -2rem;
 left: 4rem;
 clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
 transform: rotate(-45deg);
 border-radius: 0 0 0 0.25em;
}

.quote-icon{
  color: var(--mainPurple);
  font-size: 40px;
  font-size: 2.5rem;
  margin-right: 16px;
  margin-right: 1rem;
  float:left;
}

.bubble-title{
  margin-bottom:1rem;
}

.author{
    margin: 1rem 0 0 45%;
  }

.author p{
  display:inline;
}

@media (min-width: 768px){
  margin-bottom: 4rem;

  .author{
    margin: 0.5rem 0 0 50%;
  }
}

@media (min-width: 996px){
  .author{
    margin: 0.5rem 0 0 35%;
  }
}
`;

export default ReviewItem