How to make dashboard page in reactjs

Question

I want to create this type dashboard enter image description here but not able to work. How can we make this type style.

I try to make this type dashboard page in my code but it's not work. Anybody please help me out. And check my code below.

My js code

return (
    <div className="dashboard">
      <div className="dashboard__container">
        Logged in as
        <div>{name}</div>
        <div>{user?.email}</div>
        <button className="dashboard__btn" onClick={logout}>
          Logout
        </button>
      </div>
    </div>
  );
}

And my css code

.dashboard {
  height: 100vh;
  width: 100%;
  background: #3e295a40;
}

.dashboard__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  background-color: #15b88357;
  padding: 1em 20px 1em 20px;
  color: white;
  font-weight: bold;
}

.dashboard__btn {
  margin-top: -5px;
  font-size: 18px;
  padding: 0.25em 0.5em;
  border: none;
  color: white;
  background-color: #402958;
}

.center {   text-align: center; }

Please help me out.

Answer 1

I am using bootstrap for "css only" to design my website generally. Here is how I do it.

/public/index.html

You can see that I have linked to my local bootstrap css file inside head tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      if(window.screen.height < window.screen.width) {
        window.stop()
        // window.location = "https://google.com"
      }
    </script>
    <script src="init.js" ></script>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body style="background-color: #efefef">
    <div id="root"></div>
  </body>
</html>

/src/App.js I tried to demonstrate how I used css of bootstrap inside my reactjs component. You can also use className . Also take care while adding inline style. It must be object.

const Main = () => {
  return(
    <div class="d-flex justify-content-center" style={{width:"100vw", height:"100vh"}}>
      <div>1</div>
      <div class="flex-grow-1">2</div>
      <div>
        <button class="btn-primary p-2">Abe !</button>
      </div>
    </div>
  )
}

export default Main;

If you get any error. Search for the error and try to resolve with help of google. Those error are common and can be easily fixed. You will learn alot from those errors.

How to make dashboard page in reactjs

Question

1 answers

solution1
0 2021-10-27 18:33:18

How to make dashboard page in reactjs

Question

1 answers

solution1 0 2021-10-27 18:33:18

solution1
0 2021-10-27 18:33:18