feat: live-data-animation

Author: grv-saini-20

infrastructure/control-panel/src/app.css

@@ -66,4 +66,6 @@
 	--color-danger-300: #ff968e;
 	--color-danger-400: #ff7b77;
 	--color-danger-500: #ff5255;
+
+	--color-green: #0FB340;
 }

infrastructure/control-panel/src/fragments/LiveDataFlow/LiveDataFlow.stories.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { LiveDataFlow } from '..';
+
+export default {
+	title: 'UI/LiveDataFlow',
+	component: LiveDataFlow,
+	tags: ['autodocs'],
+	render: (args: { Component: LiveDataFlow; props: ComponentProps<typeof LiveDataFlow> }) => ({
+		Component: LiveDataFlow,
+		props: args
+	})
+};
+
+export const Default = {
+	args: {}
+};

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Database01FreeIcons } from "@hugeicons/core-free-icons";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+
+	let isPaused = $state(false);
+
+	const dummyEvents = [
+		{ id: 1, from: "alice", to: "pictique" },
+		{ id: 2, from: "pictique", to: "bob" }
+	];
+</script>
+
+<style>
+    .dot{
+        offset-path: rect(0px 92% 175px 0px round 10%);
+        offset-distance: 0%;
+        offset-rotate: auto;
+        animation: move 10s linear infinite;
+    }
+
+    @keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  25% {
+    offset-distance: 25%;
+  }
+  50% {
+    offset-distance: 50%;
+  }
+  75% {
+     offset-distance: 75%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+</style>
+
+<article class="w-full h-[80vh] px-16 flex items-center bg-gray rounded-md">
+    <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%] 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>
+
+        <div class="flex flex-col items-center justify-center rounded-md gap-2 bg-white p-3 border border-black/10">
+            <HugeiconsIcon icon={Database01FreeIcons}/>
+            <div class="font-semibold text-sm">Alice</div>
+            <div class="text-xs text-gray-500">alice.vault.dev</div>
+        </div>
+
+        <div class="bg-white p-3 rounded-md shadow absolute top-[200px] start-[50%] translate-x-[-50%]  text-center">
+            <img src="/" alt="Icon">
+            <div class="text-xs text-gray-700">pictique</div>
+        </div>
+
+        <div class="flex flex-col items-center justify-center rounded-md gap-2 bg-white p-3 border border-green">
+            <HugeiconsIcon icon={Database01FreeIcons}/>
+            <div class="font-semibold text-sm">BOB</div>
+            <div class="text-xs text-gray-500">BOB.vault.dev</div>
+        </div>
+    </div>
+</article>

infrastructure/control-panel/src/fragments/index.ts

@@ -0,0 +1 @@
+export { default as LiveDataFlow } from "./LiveDataFlow/LiveDataFlow.svelte";

infrastructure/control-panel/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Table } from "$lib/ui";
+	import { LiveDataFlow } from "../fragments";
 
     const handlePreviousPage = async () => {
 	alert('Previous btn clicked. Make a call to your server to fetch data.');
@@ -72,7 +73,7 @@ const mappedData = tableData.map((row) => {
 </script>
 
 
-<section>
+<!-- <section>
     <Table
     class="mb-7"
     tableData= {mappedData}
@@ -87,4 +88,6 @@ const mappedData = tableData.map((row) => {
     {handlePreviousPage}
     {handleNextPage}
     />
-</section>
+</section> -->
+
+<LiveDataFlow/>