maybe a working page

frontend/src/config.ts

@@ -1 +1,2 @@
 export const BE_BASE_URL = "http://slackwatch-be-svc.slackwatch.svc.cluster.local/";
+//export const BE_BASE_URL = "http://localhost:8080/";

frontend/src/routes/+page.svelte

@@ -1,12 +1,35 @@
 <script lang="ts">
-    export let podsInfo: Array<{ name: string; timeScanned: string }> = [];
+	export let podsInfo: Array<{ name: string; timeScanned: string }> = [];
+	export let data;
+	console.log(podsInfo);
+	console.log(data);
 </script>
+
 <main>
 	<h1>Pods Information</h1>
-	{#each podsInfo as { name, timeScanned }}
+	{#each data.podsInfo as { name, timeScanned }}
 		<div>
-			<p>Image Name: {name}</p>
-			<p>Time Scanned: {timeScanned}</p>
+			<article class="pod-info">
+				<h2>{name}</h2>
+				<time datetime="{timeScanned}">{timeScanned}</time>
+			</article>
+			<style>
+				.pod-info {
+					background-color: #f0f0f0;
+					border-radius: 8px;
+					padding: 20px;
+					margin-bottom: 10px;
+					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				}
+				.pod-info h2 {
+					color: #333;
+					font-size: 1.2rem;
+				}
+				.pod-info time {
+					font-size: 0.9rem;
+					color: #666;
+				}
+			</style>
 		</div>
 	{/each}
 </main>

frontend/src/routes/+page.ts

@@ -1,14 +1,12 @@
+import { BE_BASE_URL } from "../config";
+
 	console.log('before');
 	export async function load({
 		fetch
 	}: {
 		fetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
 	}) {
-		console.log('inside');
-		const response = await fetch('http://localhost:8080/api/pods');
-		const text = await response.text(); // Get the raw response text
-		console.log('Raw response:', text);
-		const podsInfo = await response.json(); // Parse the response as JSON
-		console.log(podsInfo);
-		return { props: { podsInfo } }; // Return podsInfo for Svelte to use
+    const response = await fetch(`${BE_BASE_URL}api/pods`);
+    const podsInfo = await response.json(); // Parse the response as JSON
+    return { podsInfo };
 	}