ui changes and cs prices

src/routes/projects/game-tracker/call-of-duty/[slug]/+page.svelte

@@ -4,6 +4,7 @@
 	import { deserialize } from '$app/forms';
 	import { SvelteSet } from 'svelte/reactivity';
 	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import { appliesTo, summarizeGame } from '$lib/game-tracker/mastery';
 	import type { PageProps } from './$types';
 
@@ -131,19 +132,12 @@
 	</div>
 
 	<div class="mt-8 flex flex-wrap items-center justify-between gap-4">
-		<div role="tablist" class="flex gap-6 text-lg">
-			{#each tabs as name (name)}
-				<button
-					role="tab"
-					type="button"
-					aria-selected={tab === name}
-					onclick={() => (tab = name)}
-					class={tab === name
-						? 'underline underline-offset-8'
-						: 'text-[var(--site-muted)] hover:text-[var(--site-text)]'}>{name}</button
-				>
-			{/each}
-		</div>
+		<Tabs.Root bind:value={tab}
+			><Tabs.List
+				>{#each tabs as name (name)}<Tabs.Trigger value={name}>{name}</Tabs.Trigger
+					>{/each}</Tabs.List
+			></Tabs.Root
+		>
 		<label class="flex cursor-pointer items-center gap-3">
 			<input type="checkbox" bind:checked={hideDone} class="h-5 w-5 accent-[var(--site-text)]" />
 			hide finished