Reorganise home page components

src/components/index.ts

@@ -6,4 +6,3 @@ export { default as LeaderboardHeaderLine } from "./LeaderboardHeaderLine.vue"
 export { default as LeaderboardLine } from "./LeaderboardLine.vue"
 export { default as LoadingCard } from "./LoadingCard.vue"
 export { default as NavCard } from "./NavCard.vue"
-export { default as SeparatorLine } from "./SeparatorLine.vue"

src/pages/home/HomePage.vue

@@ -0,0 +1,49 @@
+<template>
+	<main :class="{ 'mobile-layout': isMobile }">
+		<HeaderCard />
+		<SearchCard />
+		<SearchHistoryCard />
+		<FooterCard />
+	</main>
+</template>
+
+<script lang="ts" setup>
+	import { FooterCard, HeaderCard } from "@/components"
+	import { SearchCard, SearchHistoryCard } from "./components"
+	import { siteName } from "@/data"
+	import { useHead } from "@vueuse/head"
+	import { useIsMobile } from "@/hooks"
+
+	const isMobile = useIsMobile()
+	useHead({ title: siteName })
+</script>
+
+<style scoped>
+	main {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		justify-content: center;
+		min-height: 100vh;
+
+		&.mobile-layout {
+			justify-content: flex-start;
+			margin-top: 0.5em;
+
+			.content-card {
+				width: calc(100vw - 1em);
+			}
+		}
+
+		&:not(.mobile-layout) {
+			.content-card {
+				min-width: 25em;
+			}
+		}
+	}
+
+	.content-card {
+		width: 25vw;
+	}
+</style>

src/pages/home/components/SearchCard.vue

@@ -0,0 +1,61 @@
+<template>
+	<ContentCard>
+		<input autocapitalize="on" :class="{ [$style.input]: true, [$style.highlighted]: isError }" placeholder="Enter the guild name" v-model="guildName" />
+		<button :key="s.domain" :style="{ backgroundColor: s.colour }" @click="() => navigateToLeaderboard(s.domain)" v-for="s of supportedServers">
+			Look it up in {{ s.name }}
+		</button>
+		<DividerLine>OR</DividerLine>
+		<button @click="navigateToCustomLeaderboard" :class="$style.customLeaderboardButton">
+			{{ store.customList.length > 0 ? "Open" : "Create a" }} custom leaderboard
+		</button>
+	</ContentCard>
+</template>
+
+<script lang="ts" setup>
+	import { ContentCard } from "@/components"
+	import { DividerLine } from "."
+	import { ref } from "vue"
+	import { type RegionEnum, supportedServers } from "@/data"
+	import { useMainStore } from "@/stores"
+	import { useNavigation } from "@/hooks"
+
+	const { navigateToCustomLeaderboard, navigateToGuildLeaderboard } = useNavigation()
+	const store = useMainStore()
+
+	const guildName = ref("")
+	const isError = ref(false)
+
+	function navigateToLeaderboard(region: RegionEnum) {
+		// If guild name input is empty, highlight it and exit
+		if (guildName.value.length < 1) {
+			isError.value = true
+			return
+		}
+
+		store.addGuildToHistory(region, guildName.value)
+		navigateToGuildLeaderboard(region, guildName.value)
+	}
+</script>
+
+<style module>
+	.input {
+		grid-column: 1/3;
+		margin: 0;
+		text-align: center;
+		text-transform: capitalize;
+
+		&.highlighted {
+			box-shadow: 0 0 0.5em var(--colour-red);
+			outline: 1px solid var(--colour-red);
+		}
+	}
+
+	.input::placeholder {
+		text-transform: none;
+	}
+
+	.customLeaderboardButton {
+		background-color: var(--colour-green);
+		grid-column: 1/3;
+	}
+</style>

src/pages/home/components/SearchHistoryCard.vue

@@ -0,0 +1,33 @@
+<template>
+	<ContentCard v-if="store.history.length > 0">
+		<button :class="$style.button" :key="h.ts" @click="() => navigateToLeaderboard(h.region, h.name)" v-for="h of store.history">
+			{{ h.region }}
+			{{ capitalize(h.name) }}
+			({{ formatDistanceToNow(h.ts) }} ago)
+		</button>
+	</ContentCard>
+</template>
+
+<script lang="ts" setup>
+	import { capitalize } from "lodash"
+	import { ContentCard } from "@/components"
+	import { formatDistanceToNow } from "date-fns"
+	import { type RegionEnum } from "@/data"
+	import { useMainStore } from "@/stores"
+	import { useNavigation } from "@/hooks"
+
+	const { navigateToGuildLeaderboard } = useNavigation()
+	const store = useMainStore()
+
+	function navigateToLeaderboard(region: RegionEnum, name: string) {
+		store.addGuildToHistory(region, name)
+		navigateToGuildLeaderboard(region, name)
+	}
+</script>
+
+<style module>
+	.button {
+		background-color: var(--colour-teal);
+		grid-column: 1/3;
+	}
+</style>

src/pages/home/components/index.ts

@@ -0,0 +1,3 @@
+export { default as DividerLine } from "./DividerLine.vue"
+export { default as SearchCard } from "./SearchCard.vue"
+export { default as SearchHistoryCard } from "./SearchHistoryCard.vue"

src/router.ts

@@ -6,7 +6,7 @@ export enum routeNameEnum {
 	LEADERBOARD = "leaderboard",
 }
 
-const HomePage = () => import("@/views/HomePage.vue")
+const HomePage = () => import("@/pages/home/HomePage.vue")
 const LeaderboardPage = () => import("@/views/LeaderboardPage.vue")
 
 export default createRouter({