Coding

DashboardHome.js

const MainC = styled.div`
  height:100%;
  width:100%;
  display:grid;
  grid-template-rows:1fr 2fr;
`

const TopBox = styled.div`
  margin-top:2%;
  width:100%;
  height:50%;
  display:flex;
  justify-content:space-between;   
`;

const TopItem =  styled.div`
  width:100%;
  heigth:100%;
  font-family: "Open Sans";
  background-color:white;
  border-radius:5px;
  margin-left:1vw;
  margin-right:1vw;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
`;

const TopTitle = styled.div`
  color:#2d2869;
  font-size:12px;
`;

const TopDesc = styled.div`
  font-size:11px;
  font-weight:bold;
`

const Contents = styled.div`
  margin-top:5%;
  margin-left:1vw;
  padding-right:2vw;
  width:100%;
  height:175%;
  display:grid;
  grid-template-columns: 3fr 1fr;

`;

const Graph = styled.div`
  margin-right:1vw;
  background-color:black;
  border-radius:20px;
  
`;

const Position = styled.div`
  background-color:red;
`
const DashboardHome = ({ isBusy }) => {
  return (
    <Layout>
      <SEO title="Dashboard" />
      <MainC>
        <Box>
          <TopBox>
            <TopItem>
               <TopTitle>
                  Title
               </TopTitle><br/>
               <TopDesc>
                  Description
               </TopDesc>
            </TopItem>
            <TopItem>Evet</TopItem>
            <TopItem>Evet</TopItem>
            <TopItem>Evet</TopItem>
            <TopItem>Evet</TopItem>
          </TopBox>
          <Contents>
            <Graph>Emre</Graph>
            <Position>Çağatay</Position>
          </Contents>
        </Box>
      </MainC>
    </Layout>
  );
};