toeasy-front/src/lib/components/StatsCard.svelte

<script>
  export let title;
  export let value;
  export let change;
  export let icon;
  export let iconUrl = null;
  export let iconSvg = null; 
</script>

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow">
  <div class="flex justify-between items-start mb-4">
    <div>
      <div class="text-gray-500 dark:text-gray-300 text-sm font-medium">{title}</div>
      <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{value}</div>
      <div class="text-gray-500 dark:text-gray-400 text-xs">{change}</div>
    </div>
    <div class="w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-xl text-gray-700 dark:text-gray-200 [&>svg]:w-6 [&>svg]:h-6">
      {#if iconSvg}
        {@html iconSvg}
      {:else if iconUrl}
        <img src={iconUrl} alt="" aria-hidden="true" class="w-6 h-6" />
      {:else}
        {icon}
      {/if}
    </div>
  </div>
</div>