import React from 'react';

class Dashboard extends React.Component {

  render() {
    return (
      <React.Fragment>
        <div className="columns">
          <div className="column-9">
            <div className="box box-banner">
              <div className="columns">
                <div className="column-9">
                  <h1>PURE HEADLESS CMS</h1>
                  <h2>API-first content management system</h2>
                </div>
                <div className="column-3">
                  <button type="button" className="btn btn-white btn-large">Join us on Github</button>
                  <br/>
                  <br/>
                  <button type="button" className="btn btn-white btn-large">See our whatever</button>
                </div>
              </div>
            </div>
          </div>
          <div className="column-3">
            <div className="box box-card">
              <div className="box-header box-header-action">
                <div className="box-title">Status</div>
                <div className="badge-label badge-label-green badge-label-small">Live</div>
              </div>
              <div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-9">Posts</div>
                    <div className="column-3">
                      <div className="box-cell box-cell-right">
                        <strong>10</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-9">Pages</div>
                    <div className="column-3">
                      <div className="box-cell box-cell-right">
                        <strong>5</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-9">Tags</div>
                    <div className="column-3">
                      <div className="box-cell box-cell-right">
                        <strong>12</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-9">
                      Version
                      <div><a href="#" className="btn btn-link btn-blue btn-small">See Changelog</a></div>
                    </div>
                    <div className="column-3">
                      <div className="box-cell box-cell-right">
                        <strong>0.1.0</strong>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="column-6">
            <div className="box box-card">
              <div className="box-header">
                <div className="box-title">Latest Changes</div>
                <div className="box-subtitle">Track the latest changes in your content.</div>
              </div>
              <div className="box-table">
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        a few seconds ago
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        5 minutes ago
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        4 hours ago
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        a day ago
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        5 days ago
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        20/09/2019
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Edited by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis">How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        24/09/2019
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12"><div className="label">Published by Aleksandar Cugurovic</div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="column-6">
            <div className="box box-card">
              <div className="box-header">
                <div className="box-title">Drafts</div>
                <div className="box-subtitle">List of all draft entries</div>
              </div>
              <div className="box-table">
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Post</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Post</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Post</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Page</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Page</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Post</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
                <div className="box-row">
                  <div className="columns align-center">
                    <div className="column-8">
                      <div className="box-cell box-cell-left">
                        <div className="elipsis"><strong>Post</strong> &middot; How to boost your digital marketing</div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <a href="#">Edit</a>
                          <a href="#">Publish</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="columns">
                    <div className="column-12">
                      <div className="label">Edited by Aleksandar Cugurovic</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Dashboard;
