feat: added header at the top of the table

Author: grv-saini-20

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    let { children }:{children: Snippet} = $props();
+</script>
+
+<article class="bg-gray rounded-[26px] px-4 py-7">
+    {@render children?.()}
+</article>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+    let { title, searchValue = $bindable(""), rightTitle}:{title: string, searchValue: string, rightTitle: string} =  $props();
+</script>
+
+<header class="w-full flex items-center justify-between mb-4 px-4">
+    <div class="flex items-center gap-4">
+        <p class="text-black-700 font-semibold whitespace-nowrap">{title}</p>
+        <input
+            type="text"
+            placeholder="Search eVaults"
+            bind:value={searchValue}
+            class="border border-gray-300 bg-black-100 px-4 py-1.5 rounded-[8px] w-full text-xs text-black-700 placeholder:text-black-700 outline-0"
+        />
+    </div>
+    
+    <div class="flex gap-2 items-center">
+        <span class='w-2 h-2 inline-block rounded-full bg-secondary'></span>
+        <p class="text-sm text-black-700">{rightTitle}</p>
+    </div>
+</header>

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

@@ -1,3 +1,5 @@
 export { default as LiveDataFlow } from "./LiveDataFlow/LiveDataFlow.svelte";
 export { default as Logs } from "./Logs/Logs.svelte";
-export { default as VaultNode } from "./Nodes/VaultNode.svelte";
+export { default as VaultNode } from "./Nodes/VaultNode.svelte";
+export { default as TableCard } from "./TableCard/TableCard.svelte";
+export { default as TableCardHeader } from "./TableCardHeader/TableCardHeader.svelte"; 

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

@@ -14,10 +14,10 @@
 		{#if pageUrl === "/"}
 		<div class="flex items-center gap-4">
 			<ButtonAction size="sm"  variant="soft">Refresh</ButtonAction>
-			<ButtonAction size="sm" class="whitespace-nowrap" variant="soft" callback={() => goto("/monitoring")}>Start Monitoring</ButtonAction>
+			<ButtonAction size="sm" class="whitespace-nowrap" variant="solid" callback={() => goto("/monitoring")}>Start Monitoring</ButtonAction>
 		</div>
 		{:else}
-			<ButtonAction size="sm" class="whitespace-nowrap" variant="soft" callback={() => goto("/")}>Exit Monitoring</ButtonAction>
+			<ButtonAction size="sm" class="whitespace-nowrap" variant="solid" callback={() => goto("/")}>Exit Monitoring</ButtonAction>
 		{/if}
 	</header>
 	<section class="px-10">

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {TableCard, TableCardHeader} from '$lib/fragments';
 	import { Table } from '$lib/ui';
 
 	const handlePreviousPage = async () => {
@@ -15,11 +16,13 @@
 		'Smart Contract'
 		// "Ledger Link",
 	];
+
 	const pages = [
 		{ name: '1', href: '#' },
 		{ name: '2', href: '#' },
 		{ name: '3', href: '#' }
 	];
+
 	const tableData = [
 		{
 			image: 'https://example.com/image1.jpg',
@@ -61,12 +64,6 @@
 				type: 'text',
 				value: row.smartContract
 			}
-			// rowSix: {
-			//     type: "snippet",
-			//     snippet: BadgeCell,
-			//     value:
-			//         row.ledgerLink,
-			// },
 		};
 	});
 
@@ -95,18 +92,31 @@
 </script>
 
 <section>
-    <Table
-    class="mb-7"
-    tableData= {mappedData}
-    withSelection= {true}
-    {handlePreviousPage}
-    {handleNextPage}
-    />
+    <TableCard>
+        <TableCardHeader
+            title="Events"
+            searchValue=""
+            rightTitle="No evault selected. Select an evault to monitor logs"/>
+        <Table
+        class="mb-7"
+        tableData= {mappedData}
+        withSelection= {true}
+        {handlePreviousPage}
+        {handleNextPage}
+        />
+    </TableCard>
 
-    <Table
-    tableData= {mappedData}
-    withSelection= {true}
-    {handlePreviousPage}
-    {handleNextPage}
-    />
+    <TableCard>
+        <TableCardHeader
+            title="Events"
+            searchValue=""
+            rightTitle="No evault selected. Select an evault to monitor logs"/>
+        <Table
+        class="mb-7"
+        tableData= {mappedData}
+        withSelection= {true}
+        {handlePreviousPage}
+        {handleNextPage}
+        />
+    </TableCard>
 </section>