From f035b17c36b41d0db29c56584c5e27c1c869e1a6 Mon Sep 17 00:00:00 2001
From: Luke Hagar <lukeslakemail@gmail.com>
Date: Fri, 24 May 2024 22:03:11 -0500
Subject: [PATCH] Moved to stats page

---
 src/routes/+page.svelte        | 71 +++++++++++-----------------------
 src/routes/FancyAppRail.svelte | 18 +++++++++
 src/routes/stats/+page.svelte  | 27 +++++++++++++
 3 files changed, 67 insertions(+), 49 deletions(-)
 create mode 100644 src/routes/stats/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4caeb3c..1bf9b18 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,50 +1,23 @@
-<script lang="ts">
-	import { openApiStore, operationCount, pathCount } from '$lib';
-
-	const stats = [
-		{
-			title: 'Paths',
-			value: pathCount($openApiStore)
-		},
-		{
-			title: 'Operation IDs',
-			value: operationCount($openApiStore)
-		}
-	];
-</script>
-
-<div class="w-full h-full flex flex-col">
-	<div class="flex flex-row gap-4 justify-center">
-		{#each stats as stat}
-			<div class="card w-52 p-10 text-center flex flex-col gap-4">
-				<h2 class="text-lg">{stat.title}</h2>
-				<p class="text-lg">
-					{stat.value}
-				</p>
-			</div>
-		{/each}
-	</div>
-	<div class="flex flex-col items-center justify-center grow">
-		<h1 class="h1">
-			<span
-				class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
-			>
-				Design.
-			</span>
-		</h1>
-		<h1 class="h1">
-			<span
-				class="bg-gradient-to-br from-red-500 to-yellow-500 bg-clip-text text-transparent box-decoration-clone"
-			>
-				Build.
-			</span>
-		</h1>
-		<h1 class="h1">
-			<span
-				class="bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone"
-			>
-				Deploy.
-			</span>
-		</h1>
-	</div>
+<div class="w-full h-full flex flex-col items-center justify-center grow">
+	<h1 class="h1">
+		<span
+			class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
+		>
+			Design.
+		</span>
+	</h1>
+	<h1 class="h1">
+		<span
+			class="bg-gradient-to-br from-red-500 to-yellow-500 bg-clip-text text-transparent box-decoration-clone"
+		>
+			Build.
+		</span>
+	</h1>
+	<h1 class="h1">
+		<span
+			class="bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone"
+		>
+			Deploy.
+		</span>
+	</h1>
 </div>
diff --git a/src/routes/FancyAppRail.svelte b/src/routes/FancyAppRail.svelte
index c51572b..c5fda08 100644
--- a/src/routes/FancyAppRail.svelte
+++ b/src/routes/FancyAppRail.svelte
@@ -124,6 +124,24 @@
 		</svg>
 		Paths
 	</AppRailAnchor>
+	<AppRailAnchor href="/stats" selected={$page.url.pathname === '/stats'}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="size-6 mx-auto"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+			/>
+		</svg>
+		Stats
+	</AppRailAnchor>
+
 	<svelte:fragment slot="trail">
 		<FileButton
 			bind:files
diff --git a/src/routes/stats/+page.svelte b/src/routes/stats/+page.svelte
new file mode 100644
index 0000000..95aefda
--- /dev/null
+++ b/src/routes/stats/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { openApiStore, operationCount, pathCount } from '$lib';
+
+	const stats = [
+		{
+			title: 'Paths',
+			value: pathCount($openApiStore)
+		},
+		{
+			title: 'Operation IDs',
+			value: operationCount($openApiStore)
+		}
+	];
+</script>
+
+<div class="flex flex-row gap-4 justify-center">
+	{#each stats as stat}
+		<div
+			class="border-token rounded-container-token bg-surface-backdrop-token w-52 p-10 text-center flex flex-col gap-4"
+		>
+			<h2 class="text-lg">{stat.title}</h2>
+			<p class="text-lg">
+				{stat.value}
+			</p>
+		</div>
+	{/each}
+</div>