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";

const Cabinet = ({onLogOut}) => {
    return (
    <>
    <div className="container d-flex justify-content-center align-items-center mt-5 mb-5">
    <div className="card">
        <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">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