{"size": 1075, "ext": "js", "max_stars_repo_path": "src/components/NewConversation.js", "max_stars_repo_name": "bw-empowered-conversations/Front-End", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/NewConversation.js", "max_issues_repo_name": "bw-empowered-conversations/Front-End", "max_issues_repo_issues_event_min_datetime": "2021-03-10T02:52:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T21:40:23.000Z", "max_forks_repo_path": "src/components/NewConversation.js", "max_forks_repo_name": "bw-empowered-conversations/Front-End", "max_forks_repo_forks_event_min_datetime": "2020-01-08T17:42:17.000Z", "max_forks_repo_forks_event_max_datetime": "2020-01-09T21:28:58.000Z"}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": 2, "avg_line_length": 21.9387755102, "max_line_length": 97, "alphanum_fraction": 0.6260465116}
import React from "react";
import styled from 'styled-components';

const StyledMainContentDiv = styled.div`
      width: 75%;
      align-self: center;
      flex-direction:column;
      height: 20vh;
      justify-content: space-around;
      display:flex;
      align-items:center;

      .pTop {
          font-size: 2.2rem;
      }
      .pBottom {
          font-size: 1.8rem;
      }

`
const ButtonSpan = styled.button`
    border: 1px solid #4E09A6;
    color: #4E09A6;
    background:none;
    border-radius: 4px; 
    font-size: 1.8rem;
    padding: 1.2rem 2rem;
    font-weight: 500;
    width: 19.2rem;
    text-align:center;
`


const NewConversation = (props) => {

  return (
    <StyledMainContentDiv>
      <p className='pTop'>You don't have a conversation selected</p>
      <p className='pBottom'>Choose one from your existing conversations, or start a new one.</p>
      <ButtonSpan onClick={() => props.setShow(true)}> New Conversation</ButtonSpan>
    </StyledMainContentDiv>

  );
}

export default NewConversation


// onClick = {() => setShow(true)}