Project/projectreact/src/pages/cabinet.js

import React from "react";
import { connect } from "react-redux";
import ConnectNickName from "../components/nick";

import ImgProfile from "../components/profile";
import ConUpload from "./upload";
import { actionAuthLogout } from "../actions/actionAuthLogout";

const Cabinet = ({ onLogOut }) => {
  return (
    <>
      <div className="container d-flex justify-content-center align-items-center mt-5 mb-5" >
        <div className="card" style = {{boxShadow:'7px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
          <div className="upper">
            {" "}
            <ImgProfile px={"300px"} />{" "}
          </div>
          <div className="user text-center">
            <div className="profile mt-3">
              {" "}
              <ConUpload width={"100px"} />{" "}
            </div>
          </div>
          <div className="mt-5 text-center">
            <h4 className="mb-0">
              <ConnectNickName />
            </h4>
            <a href="/projects">
              <button type="button" className="btn btn-outline-success border-success">
                My Projects
              </button>
            </a>
            <div className="d-flex justify-content-center align-items-center mt-4 px-4">
              <a href="/">
                <button className="btn btn-primary btn-sm mb-3 ">
                  Main Page
                </button>
              </a>
            </div>
            <button
              className="btn btn-secondary btn-sm mb-3"
              onClick={() => onLogOut() }
            >
              Log out
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

const ConnectCabinet = connect(null, { onLogOut: actionAuthLogout })(Cabinet);

export default ConnectCabinet;