tabler/shared/components/cards/CrmStats.astro

---
import Subheader from '@ui/Subheader.astro'
import Icon from '@ui/Icon.astro'
import Trending from '@ui/Trending.astro'

interface Props {
  color?: string
  icon?: string
  /** light avatar background (bg-{color}-lt) instead of bg-{color} text-white */
  lt?: boolean
  title?: string
  description?: string
  /** passed to Trending (keeps its +/- sign) */
  changeValue?: string
  /** trending unit; Trending defaults to '%' */
  changeValueUnit?: string
  class?: string
}

const { color, icon, lt, title = '1700', description = 'Users', changeValue, changeValueUnit, class: className } = Astro.props

const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
---

<div class:list={['card card-sm', className]}>
  <div class="card-body p-3">
    <div class="row align-items-center">
      {
        icon && (
          <div class="col-auto">
            <span class:list={avatarClass}>
              <Icon name={icon} />
            </span>
          </div>
        )
      }

      <div class="col">
        <Subheader>
          {title}
        </Subheader>
        <div class="h3 m-0 p-0">
          {description}
        </div>
      </div>

      {
        changeValue !== undefined && (
          <div class="col-auto">
            <Trending value={changeValue} unit={changeValueUnit} />
          </div>
        )
      }
    </div>
  </div>
</div>