From 20ee0c1a9efe588a8a24d47cc345c24e76c02e6f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 22 Dec 2020 18:06:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A1=20sample=20card=20layout=20+=20dat?=
 =?UTF-8?q?a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatCards.svelte | 60 ++++++++++++++-------------------
 src/locales/en.json             |  6 +++-
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/StatCards.svelte b/src/components/StatCards.svelte
index 1f10672b..b4dab96a 100644
--- a/src/components/StatCards.svelte
+++ b/src/components/StatCards.svelte
@@ -1,3 +1,7 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
 <div
   class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
   <div class="w-full lg:w-1/4">
@@ -5,8 +9,10 @@
       class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
       <div class="flex flex-row items-center justify-between">
         <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">Users</div>
-          <div class="text-xl font-bold">588</div>
+          <div class="text-xs uppercase font-light text-grey-500">
+            {$_('runners')}
+          </div>
+          <div class="text-xl font-bold">69</div>
         </div><svg
           stroke="currentColor"
           fill="none"
@@ -31,8 +37,10 @@
       class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
       <div class="flex flex-row items-center justify-between">
         <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">Sessions</div>
-          <div class="text-xl font-bold">435</div>
+          <div class="text-xs uppercase font-light text-grey-500">
+            {$_('total-scans')}
+          </div>
+          <div class="text-xl font-bold">1500</div>
         </div><svg
           stroke="currentColor"
           fill="none"
@@ -55,24 +63,15 @@
       <div class="flex flex-row items-center justify-between">
         <div class="flex flex-col">
           <div class="text-xs uppercase font-light text-grey-500">
-            Bounce rate
+            {$_('total-donations')}
           </div>
-          <div class="text-xl font-bold">40.5%</div>
+          <div class="text-xl font-bold">5000,00 €</div>
         </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
+          xmlns="http://www.w3.org/2000/svg"
           height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><path
-            d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-          <polyline points="15 3 21 3 21 9" />
-          <line x1="10" y1="14" x2="21" y2="3" /></svg>
+          width="24"><path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
       </div>
     </div>
   </div>
@@ -82,22 +81,15 @@
       <div class="flex flex-row items-center justify-between">
         <div class="flex flex-col">
           <div class="text-xs uppercase font-light text-grey-500">
-            Session duration
+            {$_('total-distance')}
           </div>
-          <div class="text-xl font-bold">1m 24s</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" />
-          <polyline points="12 6 12 12 16 14" /></svg>
+          <div class="text-xl font-bold">100.0 km</div>
+        </div>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
+            d="M0 0h24v24H0z"
+            fill="none" />
+          <path
+            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
       </div>
     </div>
   </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index c25c6928..37246660 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -24,5 +24,9 @@
   "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
   "e-mail-adress": "E-Mail Adress",
   "mail-validation-in-progress": "mail validation in progress...",
-  "invalid-mail-reset": "the provided email is invalid"
+  "invalid-mail-reset": "the provided email is invalid",
+  "runners": "runners",
+  "total-scans": "total scans",
+  "total-donations": "total donations",
+  "total-distance": "total distance"
 }