# React MONKCHAT

Nome: Mateus Eustáquio
N° 35
INFO A

[toc]

## Como ficou

## Pasta src /Componetes / cabecalho

### Componetes / cabecalho

#### index.js

import {Barra, ConteinerCabecalho} from './styled'


export default function Cabecalho (){
    return(
        <ConteinerCabecalho>
        <div className= "logo"> <img src="/assets/images/logoMonk.png" alt=""/></div>
          <Barra/>
        <div class="titulo">MonkChatWeb </div>
       </ConteinerCabecalho>

    )
}

#### Styled.JS

import styled  from "styled-components";

const Barra = styled.div`
 
    background: linear-gradient(180deg, #BA9D4C -10.17%, #F3D991 115.25%);
    width: 4px;
    height: 3em;
    margin: 0em 1em;
    border-radius: 1em;

`

const ConteinerCabecalho = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;

 .titulo{
   color: #FFFFFF;
   font: 36px Montserrat;
}

 .logo img {
   max-width: 86px;
   max-height: 56px;
}


`


export {Barra, ConteinerCabecalho}

## Pasta src / Pages / Monkchat

##### index.js

import {Conteiner,ContConteudo,ConteinerConteudo, ConteinerChat} from './styled'

import Cabecalho from "../../components/cabecalho"



export default function MonkChat ()
{
    return (
   <Conteiner>
       <Cabecalho/>
       <ContConteudo>
           <ConteinerConteudo>
           <div class="conteudo">
            <div class="registro">
                <div class="label">Sala: <input/> </div>
                <div class="label">Nick: <input /> </div>
                
                <div class="botoes">
                    <button>Criar</button>
                    <button>Entrar</button>
                </div>
            </div>

            <div class="mensagens">
                <div class="texto">Mensagem: </div>
                <textarea name="Escreva aqui sua mensagem" placeholder="Escreva aqui sua mensagem" id="" cols="30" rows="10" pa></textarea>
            </div>

            <div class="Enviarm"> <button>Enviar </button></div>
            
        </div>

        <ConteinerChat>
           <div class="Atualizar"><img src="../images/AtualizarMonk.png" alt="" srcset=""/></div>
            <div class="conteudo-chat">
                <div class="mensagens-chat">
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                    <div class="mensagem">(13:08:10) Michael entrou na sala...</div>
                    <div class="mensagem">(13:10:00) Goku entrou na sala...</div>
                    <div class="mensagem">(13:10:20) Goku saiu da sala...</div>
                    <div class="mensagem">(13:06:1)  Mateus entrou na sala...</div>
                    <div class="mensagem">(13:07:35) Pery entrou na sala...</div>
                </div>
            </div>
           </ConteinerChat>
        </ConteinerConteudo>
       </ContConteudo>
   </Conteiner>
        
    )
}

#### styled.js

import styled from "styled-components";

const Conteiner= styled.div `
margin: 50px;
`

const ContConteudo= styled.div`
    display: flex;
    flex-direction: row;
    margin: 3em;
    
    
   
    
`

const ConteinerConteudo = styled.div`
    display: flex;
    flex-direction: row;
    margin: 3em;
    

    background: rgba(0, 0, 0, 0.12);
    
    .conteudo {
    
    margin-top: 3em;
    margin-bottom: 10em;
    margin-left: 3em;
    margin-right: 3em;


}

    .registro {
    display: flex;
    flex-direction: column;
    }

    .label {
        text-align: center;
        color: #FFFFFF;
        font: 20px Montserrat; 
        padding: 2px;
    }


    input{
        width: 10em;
        align-items: center;
        border-radius: 0.2em;
        border-style: none;
        outline: none; 
    }

    .botoes{
    display: flex;
    justify-content: space-around;
    padding-top: 10px;  
    padding-bottom: 50px ;
    padding-left: 5em;
    padding-right: 1em;
    }


    button {
        cursor: pointer;
        transition: 0.3s;
        
    }
    
    button:hover {
        color: #7b829b;
        box-shadow: 0 8px 15px rgb(0 0 0 / 20%);
    }
    


    .botoes button{
        width: 50px;
        height: 25px; 
    
        color: #FFFFFF; 
        font: 10px Montserrat; 
        background-color: #50B4BF;
        border-radius: 2em;
        border-style: none;
        outline: none;
    }

    .texto {
    color: #FFFFFF;
    font: 20px  Montserrat;
    }
    textarea{
    margin: 0px;
    height: 214px;
    width: 216px;
    padding: 2px;
    resize: none;

    border-radius: 0.5em;
    border-style: none;
    outline: none;
}

.Enviarm{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
}

.Enviarm button{
    width: 7em;
    height: 30px; 
   
  
    color: #FFFFFF; 
    font: 11px Montserrat; 
    background-color: #50B4BF;
    border-radius: 2em;
    border-style: none;
    outline: none;
}

`

const ConteinerChat = styled.div `
    margin: 3em;
    margin-top: 1.5em; 
    overflow-y: auto;



.Atualizar{
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 10px;
}



.conteudo-chat{
  padding-right: 10px ;  
  width: 60em;
  height: 30em;
  background: rgba(192, 65, 224, 0.19);   
 overflow-y: auto;
}




.mensagem{
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 8px;
    font: 12px Montserrat;
    color: #FFFFFF; 
}

.conteudo-chat::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #3E006f;
}

.conteudo-chat::-webkit-scrollbar
{
	width: 7px;
	background-color: #3E006f;
    border-radius: 10px;
}

.conteudo-chat::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #cbcbcb;
}


`


export {Conteiner, ContConteudo, ConteinerConteudo, ConteinerChat}