tabler/shared/components/HomepageContent.astro

---
// shared by index.astro and layout-vertical.astro.
import Chart from '@ui/Chart.astro'
import CardTitle from '@ui/CardTitle.astro'
import MapVectorCard from './cards/MapVectorCard.astro'
import Welcome from './cards/Welcome.astro'
import TotalUsers from './cards/charts/TotalUsers.astro'
import ActiveUsers2 from './cards/charts/ActiveUsers2.astro'
import Sales from './cards/charts/Sales.astro'
import Revenue from './cards/charts/Revenue.astro'
import NewClients from './cards/charts/NewClients.astro'
import ActiveUsers from './cards/charts/ActiveUsers.astro'
import SmallStats from './cards/SmallStats.astro'
import StorageUsage from './cards/StorageUsage.astro'
import ActivityCard from './cards/ActivityCard.astro'
import DevelopmentActivity from './cards/DevelopmentActivity.astro'
import IconsBanner from './cards/IconsBanner.astro'
import MostVisitedPages from './cards/MostVisitedPages.astro'
import Sponsor from './cards/Sponsor.astro'
import SocialTraffic from './cards/SocialTraffic.astro'
import Tasks from './cards/Tasks.astro'
import Invoices from './cards/Invoices.astro'

interface Props {
  rtl?: boolean
}

const { rtl = false } = Astro.props
---

<div class="row row-deck row-cards">
  <div class="col-sm-12 col-lg-6">
    <Welcome />
  </div>
  <div class="col-sm-6 col-lg-3">
    <TotalUsers />
  </div>
  <div class="col-sm-6 col-lg-3">
    <ActiveUsers2 />
  </div>
  <div class="col-sm-6 col-lg-3">
    <Sales />
  </div>
  <div class="col-sm-6 col-lg-3">
    <Revenue />
  </div>
  <div class="col-sm-6 col-lg-3">
    <NewClients />
  </div>

  <div class="col-sm-6 col-lg-3">
    <ActiveUsers />
  </div>

  <div class="col-12">
    <div class="row row-cards">
      <div class="col-sm-6 col-lg-3">
        <SmallStats color="primary" icon="currency-dollar" title="132 Sales" description="12 waiting payments" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats icon="brand-x" color="x" title="623 Shares" description="16 today" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats icon="brand-facebook" color="facebook" title="132 Likes" description="21 today" />
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card">
      <div class="card-body">
        <CardTitle>Traffic summary</CardTitle>
        <Chart chartId="mentions" size="lg" />
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <MapVectorCard title="Locations" />
  </div>

  <div class="col-lg-6">
    <div class="row row-cards">
      <div class="col-12">
        <StorageUsage />
      </div>
      <div class="col-12">
        <ActivityCard />
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <DevelopmentActivity />
  </div>

  <div class="col-12">
    <IconsBanner />
  </div>

  <div class="col-md-12 col-lg-8">
    <MostVisitedPages />
  </div>

  <div class="col-md-6 col-lg-4">
    <Sponsor rtl={rtl} />
  </div>

  <div class="col-md-6 col-lg-4">
    <SocialTraffic />
  </div>

  <div class="col-md-12 col-lg-8">
    <Tasks />
  </div>

  <div class="col-12">
    <Invoices />
  </div>
</div>