AnthoLume/templates/components/streak-card.tmpl

<div class="w-full">
  <div
    class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
  >
    <p
      class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
    >
      {{ if eq .Window "WEEK" }}
        Weekly Read Streak
      {{ else }}
        Daily Read Streak
      {{ end }}
    </p>
    <div class="flex items-end my-6 space-x-2">
      <p class="text-5xl font-bold text-black dark:text-white">
        {{ .CurrentStreak }}
      </p>
    </div>
    <div class="dark:text-white">
      <div
        class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200"
      >
        <div>
          <p>
            {{ if eq .Window "WEEK" }}
              Current Weekly Streak
            {{ else }}
              Current Daily Streak
            {{ end }}
          </p>
          <div class="flex items-end text-sm text-gray-400">
            {{ .CurrentStreakStartDate }} ➞ {{ .CurrentStreakEndDate }}
          </div>
        </div>
        <div class="flex items-end font-bold">{{ .CurrentStreak }}</div>
      </div>
      <div class="flex items-center justify-between pb-2 mb-2 text-sm">
        <div>
          <p>
            {{ if eq .Window "WEEK" }}
              Best Weekly Streak
            {{ else }}
              Best Daily Streak
            {{ end }}
          </p>
          <div class="flex items-end text-sm text-gray-400">
            {{ .MaxStreakStartDate }} ➞ {{ .MaxStreakEndDate }}
          </div>
        </div>
        <div class="flex items-end font-bold">{{ .MaxStreak }}</div>
      </div>
    </div>
  </div>
</div>