feat: added button and heading

Author: grv-saini-20

infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Database01FreeIcons } from "@hugeicons/core-free-icons";
+	import { Database01FreeIcons, PauseFreeIcons } from "@hugeicons/core-free-icons";
 	import { HugeiconsIcon } from "@hugeicons/svelte";
 
 	let isPaused = $state(false);
@@ -19,30 +19,40 @@
     }
 
     @keyframes move {
-        0% {
-            offset-distance: 100%;
-            opacity: 1;
-        }
-        25%{
-            opacity: 1;
-        }
-        50%{
-            opacity: 1;
-        }
-        75%{
-            opacity: 1;
-        }
-        100% {
-            offset-distance: 0%;
-            opacity: 0;
-        }
-    }
+  0% {
+    offset-distance: 100%;
+    opacity: 1;
+  }
+  60% {
+    opacity: 1; /* dot visible along right and bottom */
+  }
+  70% {
+    opacity: 0; /* start fading out on left curve */
+  }
+  80% {
+    opacity: 0;   /* fully invisible near top edge */
+  }
+  95% {
+    opacity: 0;
+  }
+  100% {
+    offset-distance: 0%;
+    opacity: 0;   /* remains invisible until teleport */
+  }
+}
 </style>
 
-<article class="w-full h-[80vh] px-16 flex items-center bg-gray rounded-md">
+<article class="w-full h-[80vh] px-16 py-6 flex flex-col items-center bg-gray rounded-md">
+    <div class="w-full flex justify-between items-center mb-20.5">
+        <h4 class="text-xl">Live Monitering</h4>
+        <button class="px-4 py-3 flex items-center gap-2 text-base font-geist font-medium text-black-700 bg-white border border-[#e5e5e5] rounded-4xl">
+            <HugeiconsIcon icon={PauseFreeIcons} size="24px"/>
+            Pause Live Feed
+        </button>
+    </div>
     <div class="relative w-full flex justify-between items-center z-10">
         <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <div class="w-[92%] h-[175px] absolute top-[55%] start-[50%] z-[-1] translate-x-[-50%] bg-transparent border border-t-transparent border-s-green border-b-green border-e-green rounded-md">
+        <div class="w-[88%] h-[175px] absolute top-[55%] start-[50%] z-[-1] translate-x-[-50%] bg-transparent border border-t-transparent border-s-green border-b-green border-e-green rounded-md">
             <div class="dot absolute h-2.5 w-2.5 top-0 start-[-1px] bg-green rounded-full"/>
         </div>