Amount above arrow

- Needs wiring up

src/components/ActivityListItem.vue

@@ -107,14 +107,21 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-28 sm:inset-x-40 mx-2 top-1/2 flex items-center"
+          class="absolute inset-x-28 sm:inset-x-40 mx-2 top-1/2 -translate-y-1/2"
         >
-          <hr
+          <div class="text-sm text-center leading-none font-semibold">
-            class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
+            88 hours
-          />
+          </div>
-          <div
+
-            class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[30px] border-t-transparent border-b-[20px] sm:border-b-[30px] border-b-transparent border-s-[27px] sm:border-s-[40px] border-e-0"
+          <div class="flex items-center">
-          ></div>
+            <hr
+              class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
+            />
+
+            <div
+              class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
+            ></div>
+          </div>
         </div>
 
         <!-- Destination -->