import { Link , usePage} from "@inertiajs/react";
export default function TitleBar(){
    const { auth } = usePage().props;
    return(
        <div className="page-title-area">
                <div className="row align-items-center">
                    <div className="col-sm-6">
                        <div className="breadcrumbs-area clearfix">
                            <h4 className="page-title pull-left">Dashboard</h4>
                            <ul className="breadcrumbs pull-left">
                                <li><Link href="/admin/dashboard">Home</Link></li>
                                <li><span>Dashboard</span></li>
                            </ul>
                        </div>
                    </div>
                    <div className="col-sm-6 clearfix">
                        <div className="user-profile pull-right">
                            <img className="avatar user-thumb" src="/admins/assets/images/author/avatar.png" alt="avatar" />
                            <h4 className="user-name dropdown-toggle" data-toggle="dropdown">{auth.user?.name}<i className="fa fa-angle-down"></i></h4>
                            <div className="dropdown-menu">
                                {/* <a className="dropdown-item" href="#">Message</a>
                                <a className="dropdown-item" href="#">Settings</a> */}

                                <Link className="dropdown-item" href="/admin/logout" method="post">
                                    Log Out
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
}