Merge pull request #7 from aritra1999/feature/website-page

Feature/website page
aritra1999 · Nov 30, 2024 · 7ecefbf · 7ecefbf
2 parents 365e47e + 84c6781
commit 7ecefbf
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
@@ -9,7 +9,7 @@
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
 				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-				outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
+				outline: 'border-foreground bg-background hover:bg-foreground hover:text-background border',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
 				link: 'text-primary underline-offset-4 hover:underline'

diff --git a/src/lib/components/ui/status/status-card.svelte b/src/lib/components/ui/status/status-card.svelte
@@ -10,7 +10,6 @@
 	import StatusPerformance from '$lib/components/ui/status/status-performance.svelte';
 	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
 	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
-	import { onMount } from 'svelte';
 
 	let {
 		websiteId,
@@ -24,14 +23,19 @@
 	let loadingStatuses = $state(true);
 	let website = $derived($websiteStore && websiteId ? $websiteStore.get(websiteId) : undefined);
 
-	onMount(async () => {
+	async function loadWebsiteStatus(websiteId: string) {
 		if (!websiteId) return;
+		loadingStatuses = true;
 		statuses =
 			demoStatuses.length > 0
 				? demoStatuses
 				: await fetch(`/api/status/${websiteId}`).then((response) => response.json());
 
 		loadingStatuses = false;
+	}
+
+	$effect(() => {
+		loadWebsiteStatus(websiteId);
 	});
 </script>
 

diff --git a/src/routes/(gaurded)/projects/[...slug]/+page.svelte b/src/routes/(gaurded)/projects/[...slug]/+page.svelte
@@ -20,14 +20,18 @@
 
 <section class="flex items-center justify-between">
 	<Header title={data.project.name} />
-	<Button
-		onclick={() => {
-			showWebsiteFormDialog = true;
-			selectedWebsiteIdStore.set(null);
-		}}
-	>
-		Add Site
-	</Button>
+	<div class="space-x-2">
+		<Button variant="outline" target="_blank" href="/status/{data.project.slug}">Status Page</Button
+		>
+		<Button
+			onclick={() => {
+				showWebsiteFormDialog = true;
+				selectedWebsiteIdStore.set(null);
+			}}
+		>
+			Add Site
+		</Button>
+	</div>
 </section>
 {#if $websiteStore === undefined}
 	<p>Loading sites...</p>

diff --git a/src/routes/status/[...project]/+page.svelte b/src/routes/status/[...project]/+page.svelte
@@ -4,6 +4,8 @@
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 	import StatusPageCard from '$lib/components/ui/status/status-page-card.svelte';
 	import type { StatusPageResponse } from '$lib/api/types.js';
+	import { Button } from '$lib/components/ui/button';
+	import { toggleMode } from 'mode-watcher';
 
 	interface Props {
 		data: { project: { id: string; name: string; description: string } };
@@ -66,7 +68,9 @@
 			{/if}
 		</section>
 		<div class="my-2 text-center text-xs">
-			Powered by <a href="https://uptiq.vercel.app" class="underline"> uptiq </a>
+			Powered by
+			<Button class="px-2 text-xs" variant="link" href="https://uptiq.vercel.app">uptiq</Button> |
+			<Button class="px-2 text-xs" variant="link" onclick={toggleMode}>Toggle theme</Button>
 		</div>
 	</main>
 {/if}