Added subtitles and tab titles

gapidobri · Aug 14, 2024 · 74cb0ed · 74cb0ed
1 parent a090d02
commit 74cb0ed
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 27 deletions.
diff --git a/src/lib/components/Subtitle.svelte b/src/lib/components/Subtitle.svelte
@@ -0,0 +1,3 @@
+<p class="text-muted-foreground text-sm">
+	<slot />
+</p>
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
@@ -1,6 +1,3 @@
-<div class="flex items-center">
-	<h1 class="text-lg font-semibold md:text-2xl">
-		<slot />
-	</h1>
-</div>
-
+<h1 class="text-lg font-semibold md:text-2xl">
+	<slot />
+</h1>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -6,6 +6,6 @@ export const load: LayoutServerLoad = async ({ params }) => {
 
 	return {
 		games: response.data!,
-		selectedGameId: params.gameId,
+		selectedGame: response.data?.find((game) => game.id === params.gameId),
 	};
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -17,7 +17,7 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
-	import { Gem, Gift, PartyPopper } from 'lucide-svelte';
+	import { Gem, Gift, PartyPopper, Percent, TextCursorInput } from 'lucide-svelte';
 	import { page } from '$app/stores';
 	import NavItem from './NavItem.svelte';
 	import GameDropdown from './GameDropdown.svelte';
@@ -27,9 +27,11 @@
 	export let data: LayoutServerData;
 
 	let path: string = 'dashboard';
+	let gameSelected = false;
 	$: {
 		const parts = $page.url.pathname.split('/');
 		path = parts.length >= 4 ? parts[3] : 'dashboard';
+		gameSelected = parts.length >= 3;
 	}
 
 	async function handleGameSelect(game?: Game) {
@@ -49,42 +51,42 @@
 			<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
 				<a href="/" class="flex items-center gap-2 font-semibold">
 					<Gem class="h-6 w-6" />
-					<span class="">Prizer</span>
+					<span>Prizer</span>
 				</a>
 			</div>
 			<div class="px-4 py-2">
 				<GameDropdown
 					games={data.games}
-					selectedId={data.selectedGameId}
+					selectedId={data.selectedGame?.id}
 					onSelect={handleGameSelect}
 				/>
 			</div>
 			<div class="flex-1">
 				<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
-					<NavItem href="/games/{data.selectedGameId}" active={path === 'dashboard'}>
-						<House class="h-4 w-4" />
-						Dashboard
-					</NavItem>
-					{#if data.selectedGameId}
-						<NavItem href="/games/{data.selectedGameId}/prizes" active={path === 'prizes'}>
+					{#if gameSelected}
+						<NavItem href="/games/{data.selectedGame?.id}" active={path === 'dashboard'}>
+							<House class="h-4 w-4" />
+							Dashboard
+						</NavItem>
+						<NavItem href="/games/{data.selectedGame?.id}/prizes" active={path === 'prizes'}>
 							<Gift class="h-4 w-4" />
 							Prizes
 						</NavItem>
-						<NavItem href="/games/{data.selectedGameId}/won-prizes" active={path === 'won-prizes'}>
+						<NavItem href="/games/{data.selectedGame?.id}/won-prizes" active={path === 'won-prizes'}>
 							<PartyPopper class="h-4 w-4" />
 							Won Prizes
 						</NavItem>
-						<NavItem href="/games/{data.selectedGameId}/users" active={path === 'users'}>
+						<NavItem href="/games/{data.selectedGame?.id}/users" active={path === 'users'}>
 							<Users class="h-4 w-4" />
 							Users
 						</NavItem>
-						<NavItem href="/games/{data.selectedGameId}/participation-methods"
+						<NavItem href="/games/{data.selectedGame?.id}/participation-methods"
 										 active={path === 'participation-methods'}>
-							<Users class="h-4 w-4" />
+							<TextCursorInput class="h-4 w-4" />
 							Participation Methods
 						</NavItem>
-						<NavItem href="/games/{data.selectedGameId}/draw-methods" active={path === 'draw-methods'}>
-							<Users class="h-4 w-4" />
+						<NavItem href="/games/{data.selectedGame?.id}/draw-methods" active={path === 'draw-methods'}>
+							<Percent class="h-4 w-4" />
 							Draw Methods
 						</NavItem>
 					{/if}

diff --git a/src/routes/games/[gameId]/+page.svelte b/src/routes/games/[gameId]/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+
+	import Title from '$lib/components/Title.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
+</script>
+
+<svelte:head>
+	<title>Prizer - Dashboard</title>
+</svelte:head>
+
+<div>
+	<Title>Dashboard</Title>
+	<Subtitle>General overview of the game</Subtitle>
+</div>
+
diff --git a/src/routes/games/[gameId]/draw-methods/+page.svelte b/src/routes/games/[gameId]/draw-methods/+page.svelte
@@ -2,10 +2,19 @@
 	import Title from '$lib/components/Title.svelte';
 	import DataTable from './DataTable.svelte';
 	import type { PageServerData } from './$types';
+	import Subtitle from '$lib/components/Subtitle.svelte';
 
 	export let data: PageServerData;
 </script>
 
-<Title>Draw Methods</Title>
+<svelte:head>
+	<title>Prizer - Draw Methods</title>
+</svelte:head>
+
+
+<div>
+	<Title>Draw Methods</Title>
+	<Subtitle>Manage how winners are selected</Subtitle>
+</div>
 
 <DataTable drawMethods={data.drawMethods} />
diff --git a/src/routes/games/[gameId]/participation-methods/+page.svelte b/src/routes/games/[gameId]/participation-methods/+page.svelte
@@ -2,10 +2,18 @@
 	import type { PageServerData } from './$types';
 	import Title from '$lib/components/Title.svelte';
 	import DataTable from './DataTable.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
 
 	export let data: PageServerData;
 </script>
 
-<Title>Participation Methods</Title>
+<svelte:head>
+	<title>Prizer - Participation Methods</title>
+</svelte:head>
+
+<div>
+	<Title>Participation Methods</Title>
+	<Subtitle>Manage how users can participate in the game</Subtitle>
+</div>
 
 <DataTable participationMethods={data.participationMethods} />
diff --git a/src/routes/games/[gameId]/prizes/+page.svelte b/src/routes/games/[gameId]/prizes/+page.svelte
@@ -2,11 +2,20 @@
 	import type { PageData } from './$types';
 	import DataTable from './DataTable.svelte';
 	import Title from '$lib/components/Title.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
 
 	export let data: PageData;
 </script>
 
-<Title>Prizes</Title>
+<svelte:head>
+	<title>Prizer - Prizes</title>
+</svelte:head>
+
+<div>
+	<Title>Prizes</Title>
+	<Subtitle>Manage the prizes available for winning in the game</Subtitle>
+</div>
+
 
 <DataTable prizes={data.prizes} />
 

diff --git a/src/routes/games/[gameId]/users/+page.svelte b/src/routes/games/[gameId]/users/+page.svelte
@@ -2,10 +2,18 @@
 	import type { PageServerData } from './$types';
 	import DataTable from './DataTable.svelte';
 	import Title from '$lib/components/Title.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
 
 	export let data: PageServerData;
 </script>
 
-<Title>Users</Title>
+<svelte:head>
+	<title>Prizer - Users</title>
+</svelte:head>
+
+<div>
+	<Title>Users</Title>
+	<Subtitle>Users that participated in the game</Subtitle>
+</div>
 
 <DataTable users={data.users} />
diff --git a/src/routes/games/[gameId]/won-prizes/+page.svelte b/src/routes/games/[gameId]/won-prizes/+page.svelte
@@ -2,10 +2,18 @@
 	import type { PageServerData } from './$types';
 	import Title from '$lib/components/Title.svelte';
 	import DataTable from './DataTable.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
 
 	export let data: PageServerData;
 </script>
 
-<Title>Won Prizes</Title>
+<svelte:head>
+	<title>Prizer - Won Prizes</title>
+</svelte:head>
+
+<div>
+	<Title>Won Prizes</Title>
+	<Subtitle>All prizes that have been won</Subtitle>
+</div>
 
 <DataTable wonPrizes={data.wonPrizes} />