chore(templates): component-ize things

templates/components/streak-card.tmpl

@@ -0,0 +1,39 @@
+<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>