import React from 'react';
import ReactDOM from 'react-dom/client';
import Sidebar from '../components/Sidebar';

const Dashboard = () => {
    return (
        <React.Fragment>
            <Sidebar/>
            
            <div className="content">
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="books-per-month">
                                <span className="block_name">Boeken per maand per genre</span>
                            </div>
                        </div>

                        <div className="col-md-3">
                            <div className="genresPercent">
                                <span className="block_name">Genres</span>
                            </div>
                        </div>
                        <div className="col-md-3">
                            <div className="ratings">
                                <span className="block_name">Ratings</span>
                            </div>

                            <div className="ratings languages">
                                <span className="block_name">Talen</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </React.Fragment>
    );
}

export default Dashboard;

if (document.getElementById('dashboard')) {
    const Index = ReactDOM.createRoot(document.getElementById("dashboard"));

    Index.render(
        <React.StrictMode>
            <Dashboard/>
        </React.StrictMode>
    )
}