# MONKCHAT REACT
Cauê Freitas Barreto
INFOB
05

## REACT

### Page Box1

import { Box1 } from "../../components/box1";

export default function box1() {
  return (
    <Box1>
      <div class="botoes">
        <Box1>
          <div class="sala">
            <label>
              Sala: <input type="text" name="input" value="" />
            </label>
          </div>
        </Box1>

        <Box1>
          <div class="nick">
            <label>
              Nick: <input type="text" name="input" value="" />
            </label>
          </div>
        </Box1>

        <Box1>
          <div class="botao">
            <div class="botao1">
              <a href="#"> Criar </a>
            </div>

            <div class="botao2">
              <a href="#">Entrar</a>
            </div>
          </div>
        </Box1>
      </div>

      <Box1>
        <div class="mensagem">
          <label for="mensagem"> Mensagem: </label>{" "}
          <textarea id="mensagem" name="mensagem" rows="14" cols="33">
            {" "}
          </textarea>
          <div class="botao3">
            <a href="#">Enviar</a>{" "}
          </div>
        </div>
      </Box1>
    </Box1>
  );
}

### Page Box2

import Mensagens from "./menssagens";
import { Box2 } from "../../components/box2";

export default function box2() {
  return (
    <Box2>
      <img src="/img/seta" alt="" />
      <div class="chat">
        <Mensagens />
      </div>
    </Box2>
  );
}

### Page Cabecalho

import { Barra } from "../../components/styled";
import { Compcabecalho } from "../../components/compcabecalho";

export default function cabecalho() {
  return (
    <Compcabecalho>
      <div className="img-logo">
        <img src="/img/logo" alt="" />
      </div>

      <Barra />

      <div className="titulo">MonkChat</div>
    </Compcabecalho>
  );
}

### Page Index

import React from "react";
import Cabecalho from "./cabecalho";
import { Conteiner } from "../../components/conteiner";

import Site from "./site";

export default function Index() {
  return (
    <Conteiner>
      <Cabecalho />
      <Site />
    </Conteiner>
  );
}

### Page Menssagens

export default function mensagens() {
  return (
    <div class="mensagens">
      <div class="mensagemchat">
        <div class="hora"> (15:02:01) </div>{" "}
        <div class="pessoa"> Brunex entrou na sala.. </div>
      </div>
      <div class="mensagemchat">
        <div class="hora">(15:03:25) </div>{" "}
        <div class="pessoa"> Brunex fala pra Todos: </div>{" "}
        <div class="voz"> Opa, tudo bem ai? </div>
      </div>
      <div class="mensagemchat">
        <div class="hora"> (15:03:25) </div>{" "}
        <div class="pessoa"> Brunex saiu da sala.. </div>
      </div>
    </div>
  );
}

### Page Site

import Box1 from "./box1";
import Box2 from "./box2";
import { Site } from "../../components/site";

export default function site() {
  return (
    <Site>
      <Box1 />
      <Box2 />
    </Site>
  );
}

## Components

### Components Box1

import styled from "styled-components";

const Box1 = styled.div`
  a {
    color: #ffffff;
    background-color: #50b4bf;

    border-radius: 20px;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    padding: 6px 25px 7px 25px;
  }

  .botao2 {
    margin: 0px 5px;
  }

  .botao3 {
    margin: 14px 0px 0px 190px;
  }

  .botao {
    display: flex;
    flex-direction: row;
    margin: 13px 0px 0px 90px;
  }

  .mensagem {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    color: #f2ebdc;
    margin: 79px 0px 0px 15px;
  }

  .mensagem textarea {
    border-radius: 5px;
    border: none;

    resize: none;
  }

  input {
    border-radius: 5px;
    border: none;
    position: relative;
    width: 177px;
    height: 30px;
    margin: 0px 0px 0px 17px;
  }

  .sala {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    color: #f2ebdc;
    margin: 51px 0px 11px 0px;
  }

  .nick {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    color: #f2ebdc;
  }

  .botoes {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
`;

export { Box1 };

### Components Box2

import styled from "styled-components";

const Box2 = styled.div`
  display: flex;
  flex-direction: column;

  img {
    width: 16px;
    height: 16px;
    margin: 18px 0px 15px 825px;
  }

  .chat {
    display: flex;
    flex-direction: column;
    background: rgba(192, 65, 224, 0.19);
    border-radius: 3px;
    width: 800px;
    height: 478px;
    margin: 0px 50px 50px 50px;
  }

  .chat {
    overflow-y: auto;
  }

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

  .chat::-webkit-scrollbar {
    width: 12px;
    background-color: #3e006f;
    border-radius: 10px;
  }

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

  .mensagens {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    margin: 21px 20px;
    line-height: 25px;
  }

  .mensagemchat {
    display: flex;
    flex-direction: row;
  }
`;

export { Box2 };

### Components Compcabecalho

import styled from "styled-components";

const Compcabecalho = styled.div`
  display: flex;
  flex-direction: row;

  .titulo {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    color: #ffffff;
    line-height: 44px;
    padding-top: 38px;
  }

  .img-logo img {
    width: 88px;
    height: 69px;
  }

  .img-logo {
    padding-top: 26px;
    padding-left: 49px;
    padding-right: 13px;
  }
`;

export { Compcabecalho };

### Components Conteiner

import styled from "styled-components";

const Conteiner = styled.div`
  display: flex;
  flex-direction: column;
  background-color: #583bbf;
  padding: 2em 2em;
`;

export { Conteiner };

### Components Site

import styled from "styled-components";

const Site = styled.div`
  display: flex;
  flex-direction: row;
  background: rgba(0, 0, 0, 0.12);
  margin: 60px 0px;
  padding: 2em 2em;
`;

export { Site };

### Components Styled

import styled from "styled-components";

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

export { Barra };