tabler/shared/components/cards/SocialTraffic.astro

---
import { formatNumber } from '@shared/lib/string-format'
import CardTitle from '@ui/CardTitle.astro'

const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,LinkedIn:420'.split(',').map((service) => {
  const [name, visitors] = service.split(':')
  return { name, visitors: Number(visitors) }
})
---

<div class="card">
  <div class="card-header">
    <CardTitle>Social Media Traffic</CardTitle>
  </div>
  <table class="table card-table table-vcenter">
    <thead>
      <tr>
        <th>Network</th>
        <th colspan="2">Visitors</th>
      </tr>
    </thead>
    <tbody>
      {
        services.map((service) => (
          <tr>
            <td>{service.name}</td>
            <td>{formatNumber(service.visitors)}</td>
            <td class="w-50">
              <div class="progress progress-xs">
                <div class="progress-bar bg-primary" style={`width: ${(service.visitors / 5000.0) * 100}%`} />
              </div>
            </td>
          </tr>
        ))
      }
    </tbody>
  </table>
</div>