tabler/shared/components/parts/charts/Activity.astro

---
import CardTitle from '@ui/CardTitle.astro'
import Chart from '@shared/components/demo/Chart.astro'
import DropdownDays from '@shared/components/demo/DropdownDays.astro'
---

<div class="card">
  <div class="card-body">
    <div class="d-flex">
      <CardTitle>Active users</CardTitle>
      <div class="ms-auto">
        <DropdownDays id="active-users" label="Select time range for active users" />
      </div>
    </div>

    <div class="row">
      <div class="col">
        <Chart chartId="active-users-2" label="Active users" />
      </div>
      <div class="col-md-auto">
        <div class="divide-y divide-y-fill">
          <div class="px-3">
            <div class="text-secondary">
              <span class="status-dot bg-primary"></span> Mobile
            </div>
            <div class="h2">10,601</div>
          </div>
          <div class="px-3">
            <div class="text-secondary">
              <span class="status-dot bg-azure"></span> Desktop
            </div>
            <div class="h2">6,109</div>
          </div>
          <div class="px-3">
            <div class="text-secondary">
              <span class="status-dot bg-green"></span> Tablet
            </div>
            <div class="h2">2,260</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>