account page

src/routes/[network]/(account)/account/+layout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Stack } from '$lib/components/layout';
+	import PillGroup from '$lib/components/navigation/pillgroup.svelte';
+
+    const { data, children } = $props();
+
+	const tabOptions = $derived.by(() => {
+		const network = String(data.network);
+		return [
+			{ href: `/${network}/account`, text: 'Overview' },
+			{ href: `/${network}/account/activity`, text: 'Activity' },
+			{ href: `/${network}/account/balances`, text: 'Balances' },
+			{ href: `/${network}/account/chaindata`, text: 'Data' }
+		];
+	});
+
+	let currentTab = $derived($page.url.pathname.split('/').slice(2)[3]);
+
+	// Derive the active state of each destination
+	let options = $derived(
+		tabOptions.map((option) => ({
+			...option,
+			active: option.href.split('/').slice(2)[2] === currentTab
+		}))
+	);
+</script>
+
+<header class="layout-stack gap-6">
+	<Stack class="gap-2">
+		<h1 class="h2 leading-none text-neutral-200/60">Account</h1>
+	</Stack>
+	<PillGroup {options} class="mb-6" />
+</header>
+
+{@render children()}

src/routes/[network]/(account)/account/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Overview</div>

src/routes/[network]/(account)/account/activity/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Activity</div>

src/routes/[network]/(account)/account/balances/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Blances</div>

src/routes/[network]/(account)/account/chaindata/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Data</div>