
import React from 'react';
import {Link} from 'react-router-dom';

function Dashboard() {
  return (
    <div className="content-wrapper">
			<section className="content-header">
				<h1>
					Dashboard
					<small>Control panel</small>
				</h1>
				<ol className="breadcrumb">
					<li><a href="index-2.html"><i className="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Forms</a></li>
					<li className="active">Editors</li>
				</ol>
			</section>
			<div className="dashboard1">
				<div className="row">
					<div className="col-xl-3 col-lg-6 col-12">
						<div className="counter-box">
							<div className="shadow bg1">	
								<div className="text-white text-center">
									<i className="fa fa-user-o fa-2x"></i>
									<div className="mt-2">Visitors</div>
									<h3 className="mt-1 count">10000</h3>
								</div>
							</div>
						</div>
					</div>
					<div className="col-xl-3 col-lg-6 col-12">
						<div className="counter-box">
							<div className="shadow bg2">
								<div className="text-center text-white">
									<i className="fa fa-money fa-2x"></i>
									<div className="mt-2">Total Earning</div>
									<div className="money"><h3>$</h3><h3 className="mt-1 count">75800</h3></div>
								</div>
							</div>
						</div>
					</div>
					<div className="col-xl-3 col-lg-6 col-12">
						<div className="counter-box">
							<div className="shadow bg3">
								<div className="text-center text-white">
									<i className="fa fa-thumbs-o-up fa-2x"></i>
									<div className="mt-2">Total Likes</div>
									<h3 className="mt-1 count">5000</h3>
								</div>
							</div>
						</div>
					</div>
					<div className="col-xl-3 col-lg-6 col-12">
						<div className="counter-box">
							<div className="shadow bg4">
								<div className="text-center text-white">
									<i className="fa fa-opencart fa-2x"></i>
									<div className="mt-2">Order Placed</div>
									<h3 className="mt-1 count">7000</h3>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="row">


				<div className="col-lg-6">

					<div className="cardbg">

						<h6 className="title-inner text-uppercase">Tab Style 2</h6>

						<div className="tab-style2">

							<ul className="nav" role="tablist">

								<li className="col-lg-4">

									<a className="nav-link active" data-toggle="tab" href="#home">Home</a>

								</li>

								<li className="col-lg-4">

									<a className="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>

								</li>

								<li className="col-lg-4">

									<a className="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>

								</li>

							</ul>


							<div className="tab-content">

								<div id="home" className="tab-pane active">

									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

								</div>

								<div id="menu1" className="tab-pane fade">

									<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

								</div>
								<div id="menu2" className="tab-pane fade">

									<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

								</div>

							</div>

						</div>

					</div>

				</div>
			</div>
		</div>
	</div>
  );
}

export default Dashboard;
