From 2019e0d6c3dbb6116c73d83c3d67a33a28e4a98c Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sat, 16 Mar 2024 15:07:51 +0800
Subject: [PATCH 01/25] Use type imports in lib/api

---
 lib/api/Account.ts           | 5 +++--
 lib/api/AccountRoute.ts      | 2 +-
 lib/api/Categories.ts        | 5 +++--
 lib/api/CategoriesRoute.ts   | 2 +-
 lib/api/Leaderboards.ts      | 5 +++--
 lib/api/LeaderboardsRoute.ts | 2 +-
 lib/api/Runs.ts              | 5 +++--
 lib/api/RunsRoute.ts         | 2 +-
 lib/api/Users.ts             | 5 +++--
 lib/api/UsersRoute.ts        | 2 +-
 10 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/lib/api/Account.ts b/lib/api/Account.ts
index 8568d7f3..630ba8fa 100644
--- a/lib/api/Account.ts
+++ b/lib/api/Account.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   ChangePasswordRequest,
   LoginRequest,
   LoginResponse,
@@ -19,7 +19,8 @@ import {
   UserViewModel,
   ValidationProblemDetails,
 } from './data-contracts'
-import { ContentType, HttpClient, RequestParams } from './http-client'
+import type { RequestParams } from './http-client'
+import { ContentType, HttpClient } from './http-client'
 
 export class Account<
   SecurityDataType = unknown,
diff --git a/lib/api/AccountRoute.ts b/lib/api/AccountRoute.ts
index f27622b8..1f2f3c21 100644
--- a/lib/api/AccountRoute.ts
+++ b/lib/api/AccountRoute.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   ChangePasswordRequest,
   LoginRequest,
   LoginResponse,
diff --git a/lib/api/Categories.ts b/lib/api/Categories.ts
index fdbead3c..47f00144 100644
--- a/lib/api/Categories.ts
+++ b/lib/api/Categories.ts
@@ -9,13 +9,14 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   CategoryViewModel,
   CreateCategoryRequest,
   ProblemDetails,
   ValidationProblemDetails,
 } from './data-contracts'
-import { ContentType, HttpClient, RequestParams } from './http-client'
+import type { RequestParams } from './http-client'
+import { ContentType, HttpClient } from './http-client'
 
 export class Categories<
   SecurityDataType = unknown,
diff --git a/lib/api/CategoriesRoute.ts b/lib/api/CategoriesRoute.ts
index 5129b183..0f49fd56 100644
--- a/lib/api/CategoriesRoute.ts
+++ b/lib/api/CategoriesRoute.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import { CategoryViewModel, CreateCategoryRequest } from './data-contracts'
+import type { CategoryViewModel, CreateCategoryRequest } from './data-contracts'
 
 export namespace Categories {
   /**
diff --git a/lib/api/Leaderboards.ts b/lib/api/Leaderboards.ts
index 9474c30c..d007ff94 100644
--- a/lib/api/Leaderboards.ts
+++ b/lib/api/Leaderboards.ts
@@ -9,14 +9,15 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   CreateLeaderboardRequest,
   LeaderboardViewModel,
   LeaderboardsListParams,
   ProblemDetails,
   ValidationProblemDetails,
 } from './data-contracts'
-import { ContentType, HttpClient, RequestParams } from './http-client'
+import type { RequestParams } from './http-client'
+import { ContentType, HttpClient } from './http-client'
 
 export class Leaderboards<
   SecurityDataType = unknown,
diff --git a/lib/api/LeaderboardsRoute.ts b/lib/api/LeaderboardsRoute.ts
index f9b9e4cd..9b043987 100644
--- a/lib/api/LeaderboardsRoute.ts
+++ b/lib/api/LeaderboardsRoute.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   CreateLeaderboardRequest,
   LeaderboardViewModel,
 } from './data-contracts'
diff --git a/lib/api/Runs.ts b/lib/api/Runs.ts
index 66b18c43..ef614e8b 100644
--- a/lib/api/Runs.ts
+++ b/lib/api/Runs.ts
@@ -9,14 +9,15 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   CategoryViewModel,
   CreateRunRequest,
   ProblemDetails,
   RunViewModel,
   ValidationProblemDetails,
 } from './data-contracts'
-import { ContentType, HttpClient, RequestParams } from './http-client'
+import type { RequestParams } from './http-client'
+import { ContentType, HttpClient } from './http-client'
 
 export class Runs<
   SecurityDataType = unknown,
diff --git a/lib/api/RunsRoute.ts b/lib/api/RunsRoute.ts
index 7527347e..de244e2b 100644
--- a/lib/api/RunsRoute.ts
+++ b/lib/api/RunsRoute.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import {
+import type {
   CategoryViewModel,
   CreateRunRequest,
   RunViewModel,
diff --git a/lib/api/Users.ts b/lib/api/Users.ts
index 4ccf98cb..40498df8 100644
--- a/lib/api/Users.ts
+++ b/lib/api/Users.ts
@@ -9,8 +9,9 @@
  * ---------------------------------------------------------------
  */
 
-import { ProblemDetails, UserViewModel } from './data-contracts'
-import { HttpClient, RequestParams } from './http-client'
+import type { ProblemDetails, UserViewModel } from './data-contracts'
+import type { RequestParams } from './http-client'
+import { HttpClient } from './http-client'
 
 export class Users<
   SecurityDataType = unknown,
diff --git a/lib/api/UsersRoute.ts b/lib/api/UsersRoute.ts
index e5afa2c3..c603334a 100644
--- a/lib/api/UsersRoute.ts
+++ b/lib/api/UsersRoute.ts
@@ -9,7 +9,7 @@
  * ---------------------------------------------------------------
  */
 
-import { UserViewModel } from './data-contracts'
+import type { UserViewModel } from './data-contracts'
 
 export namespace Users {
   /**

From ac91ae43e5b23e529f4111af7ab49a97d6c6f960 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 17 Mar 2024 00:58:54 +0800
Subject: [PATCH 02/25] Add compoments, elements, and most of the styles

---
 .../LeaderboardDetails/LeaderboardDetails.vue | 108 ++++++++++++++++++
 .../LeaderboardDetails/PlatformTags.vue       |  22 ++++
 components/elements/tags/Tag/Tag.vue          |  13 +++
 .../api/useGetLeaderboardDetail/index.ts      |   3 +-
 composables/useApi/index.ts                   |   1 +
 pages/board/[slug].vue                        |  11 +-
 6 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100644 components/blocks/LeaderboardDetails/LeaderboardDetails.vue
 create mode 100644 components/blocks/LeaderboardDetails/PlatformTags.vue
 create mode 100644 components/elements/tags/Tag/Tag.vue

diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
new file mode 100644
index 00000000..53a20f89
--- /dev/null
+++ b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
+import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
+import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
+import PlatformTags from './PlatformTags.vue'
+import Tag from 'elements/tags/Tag/tag.vue'
+import type { LeaderboardViewModel } from 'lib/api/data-contracts'
+
+interface LeaderboardDetailProps {
+  leaderboardDetail: LeaderboardViewModel
+}
+
+const todoPlatforms = ['PS4', 'PC', 'XboxSeriesX']
+
+const onFollow = () => {
+  // TODO: Trigger follow leaderboard flow
+}
+
+const onToggleMore = () => {
+  // TODO: Open the dropdown
+}
+
+// TODO: Get actual links tied to the leaderboard
+const socials: Socials[] = [
+  {
+    icon: 'twitch',
+    name: 'Twitch',
+    url: 'https://twitch.tv',
+  },
+  {
+    icon: 'youtube', // TODO: Add a globe SVG. Maybe from Icons8
+    name: 'Socials',
+    url: 'https://example.com',
+  },
+  {
+    icon: 'discord',
+    name: 'Discord',
+    url: 'https://discord.gg',
+  },
+]
+
+defineProps<LeaderboardDetailProps>()
+</script>
+
+<template>
+  <div class="leaderboard-details">
+    <div class="title">{{ leaderboardDetail.name }}</div>
+    <div class="middle">
+      <img src="https://via.placeholder.com/220x220" alt="game-art" />
+      <Tag>{{ leaderboardDetail.categories[0] ?? 'TODO' }}</Tag>
+      <span class="middle__published-year">TODO</span>
+      <PlatformTags :tags="todoPlatforms" />
+      <FollowButton class="middle__follow" :on-click="onFollow" />
+    </div>
+    <div class="bottom">
+      <BaseButton class="bottom__button" to="">
+        <i-svg-menu />
+        <span>Guides</span>
+      </BaseButton>
+      <BaseButton class="bottom__button" to="">
+        <i-svg-menu />
+        <div>Resources</div>
+      </BaseButton>
+      <BaseButton class="bottom__button" @click="onToggleMore">
+        <div>More &or;</div>
+      </BaseButton>
+      <SocialButtons :socials="socials" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.leaderboard-details {
+  @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
+  @apply flex flex-col items-center;
+  @apply border-gray-200 border-2 rounded;
+
+  & .title {
+    @apply w-full text-center;
+    @apply font-bold text-lg md:p-3;
+    @apply border-b-gray-200 border-b-2;
+  }
+
+  & .middle {
+    @apply md:m-4;
+    @apply flex flex-col items-center;
+    @apply border-b-gray-200 border-b-2;
+
+    & .middle__published-year {
+      @apply text-sm;
+    }
+
+    & .middle__follow {
+      @apply md:m-4;
+    }
+  }
+
+  & .bottom {
+    @apply md:w-full md:p-4;
+
+    & .bottom__button {
+      @apply w-full flex flex-row place-content-center gap-2 hover:bg-gray-100;
+      @apply md:mr-1 md:my-1 md:p-1;
+      @apply border-gray-200 border-2 rounded;
+    }
+  }
+}
+</style>
diff --git a/components/blocks/LeaderboardDetails/PlatformTags.vue b/components/blocks/LeaderboardDetails/PlatformTags.vue
new file mode 100644
index 00000000..df5d7b75
--- /dev/null
+++ b/components/blocks/LeaderboardDetails/PlatformTags.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Tag from 'elements/tags/Tag/tag.vue'
+interface PlatformTagsProps {
+  tags: string[]
+}
+
+defineProps<PlatformTagsProps>()
+</script>
+
+<template>
+  <div class="platform-tags">
+    <Tag v-for="tag in tags" :key="tag">
+      {{ tag }}
+    </Tag>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.platform-tags {
+  @apply flex flex-row place-content-center;
+}
+</style>
diff --git a/components/elements/tags/Tag/Tag.vue b/components/elements/tags/Tag/Tag.vue
new file mode 100644
index 00000000..b9f8de17
--- /dev/null
+++ b/components/elements/tags/Tag/Tag.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="tag" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.tag {
+  @apply bg-gray-100 rounded-md text-center p-1 text-sm;
+}
+</style>
diff --git a/composables/api/useGetLeaderboardDetail/index.ts b/composables/api/useGetLeaderboardDetail/index.ts
index ef1dd406..124c2de2 100644
--- a/composables/api/useGetLeaderboardDetail/index.ts
+++ b/composables/api/useGetLeaderboardDetail/index.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import { useApi } from 'composables/useApi'
 import { Leaderboards } from 'lib/api/Leaderboards'
+import type { ApiResponse, optionalParameters } from 'composables/useApi'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
 export async function useGetLeaderboardDetail(
diff --git a/composables/useApi/index.ts b/composables/useApi/index.ts
index 6607764e..7c0dd341 100644
--- a/composables/useApi/index.ts
+++ b/composables/useApi/index.ts
@@ -9,6 +9,7 @@ import type { HttpResponse } from 'lib/api/http-client'
 /**
  * @property {T} [data]
  * @property {ProblemDetails | null} error
+ * @property {ValidationProblemDetails | null} errors
  * @property {boolean} loading
  */
 export interface ApiResponse<T> {
diff --git a/pages/board/[slug].vue b/pages/board/[slug].vue
index 175aad71..b9ffad25 100644
--- a/pages/board/[slug].vue
+++ b/pages/board/[slug].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import Info from 'blocks/LeaderboardDetails/LeaderboardDetails.vue'
+import Loader from 'blocks/Loader/Loader.vue'
 import { useGetLeaderboardDetail } from 'composables/api/useGetLeaderboardDetail'
 
 const route = useRoute()
@@ -6,6 +8,13 @@ const leaderboardSlug = route.params.slug as string
 const leaderboardDetail = await useGetLeaderboardDetail(leaderboardSlug)
 </script>
 
+<!-- TODO: Handle 404 case. <Info> shouldn't render, instead rendering an error page. -->
 <template>
-  <p>Leaderboard Name: {{ leaderboardDetail?.data?.name || 'ERROR' }}</p>
+  <div>
+    <Loader v-if="leaderboardDetail.loading"></Loader>
+    <Info
+      v-if="!leaderboardDetail.loading"
+      :leaderboard-detail="leaderboardDetail.data!"
+    />
+  </div>
 </template>

From 8da1217fbce0a3adf5169b1baa873db464b1e6cb Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Mon, 25 Mar 2024 23:47:22 +0800
Subject: [PATCH 03/25] Update vitest recommended extension

---
 .vscode/extensions.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index ffa80745..5d14fc65 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,6 +6,6 @@
     "bradlc.vscode-tailwindcss", // Tooling for Tailwind
     "csstools.postcss", // PostCSS as Tailwind is built on top of it
     "Vue.volar", // Vue 3 Language support for VSC https://github.com/johnsoncodehk/volar
-    "ZixuanChen.vitest-explorer" // Vitest extension to run tests inside of VSCode
+    "vitest.explorer" // Vitest extension to run tests inside of VSCode
   ]
 }

From 109fdaace14a854762739b53d88052793422a1b4 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Mon, 25 Mar 2024 23:58:50 +0800
Subject: [PATCH 04/25] REBASE: Add components

---
 .../LeaderboardDetails.test.ts                | 56 +++++++++++++++++++
 .../LeaderboardDetails/LeaderboardDetails.vue | 40 ++++++++-----
 .../PlatformTags/PlatformTags.test.ts         | 14 +++++
 .../{ => PlatformTags}/PlatformTags.vue       |  2 +-
 .../buttons/DropDown/DropDown.test.ts         |  9 +++
 .../elements/buttons/DropDown/DropDown.vue    | 37 ++++++++++++
 .../buttons/DropDown/DropDownContent.vue      | 17 ++++++
 .../buttons/DropDown/DropDownItem.vue         | 13 +++++
 pages/board/[slug].vue                        |  3 +-
 9 files changed, 175 insertions(+), 16 deletions(-)
 create mode 100644 components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts
 create mode 100644 components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts
 rename components/blocks/LeaderboardDetails/{ => PlatformTags}/PlatformTags.vue (88%)
 create mode 100644 components/elements/buttons/DropDown/DropDown.test.ts
 create mode 100644 components/elements/buttons/DropDown/DropDown.vue
 create mode 100644 components/elements/buttons/DropDown/DropDownContent.vue
 create mode 100644 components/elements/buttons/DropDown/DropDownItem.vue

diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts b/components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts
new file mode 100644
index 00000000..75782379
--- /dev/null
+++ b/components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts
@@ -0,0 +1,56 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { getByTestId } from 'root/testUtils'
+import LeaderboardDetails from './LeaderboardDetails.vue'
+
+describe.skip('<LeaderboardDetails />', () => {
+  function getLeaderboardDetailsWrapper() {
+    return mount(LeaderboardDetails, {
+      props: {
+        leaderboardDetail: {
+          categories: [],
+          id: 1,
+          name: 'Stuck in the Train Simulator 2',
+          slug: 'stuck-in-the-train-sim-2',
+          socials: [
+            {
+              icon: 'disc',
+              name: 'discord',
+              url: 'https://discord.gg/leaderboards.gg',
+            },
+            {
+              icon: 'youtube',
+              name: 'Socials',
+              url: 'https://youtube.com',
+            },
+            {
+              icon: 'twit',
+              name: 'twitter',
+              url: 'https://twitter.com/bestofdyingtwit',
+            },
+          ],
+        },
+      },
+    })
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  enableAutoUnmount(afterEach)
+
+  it('should render without crashing', () => {
+    const wrapper = getLeaderboardDetailsWrapper()
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should trigger follow button', async () => {
+    const wrapper = getLeaderboardDetailsWrapper()
+    await getByTestId(wrapper, 'middle__follow').trigger('click')
+    expect(wrapper.emitted().follow?.[0]).toEqual([1])
+  })
+
+  it('should trigger', () => {
+    //
+  })
+})
diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
index 53a20f89..b8c8be86 100644
--- a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
+++ b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
+import DropDown from 'elements/buttons/DropDown/DropDown.vue'
+import DropDownContent from 'elements/buttons/DropDown/DropDownContent.vue'
+import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
 import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
 import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
-import PlatformTags from './PlatformTags.vue'
-import Tag from 'elements/tags/Tag/tag.vue'
+import Tag from 'elements/tags/Tag/Tag.vue'
+import PlatformTags from './PlatformTags/PlatformTags.vue'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
 interface LeaderboardDetailProps {
   leaderboardDetail: LeaderboardViewModel
 }
 
+// TODO: Remove this. Get from model instead.
 const todoPlatforms = ['PS4', 'PC', 'XboxSeriesX']
 
-const onFollow = () => {
-  // TODO: Trigger follow leaderboard flow
-}
-
-const onToggleMore = () => {
-  // TODO: Open the dropdown
-}
+// TODO: Implement listeners
+const emit = defineEmits<{
+  (event: 'follow', leaderboardId: number): void
+}>()
 
 // TODO: Get actual links tied to the leaderboard
 const socials: Socials[] = [
@@ -50,7 +51,11 @@ defineProps<LeaderboardDetailProps>()
       <Tag>{{ leaderboardDetail.categories[0] ?? 'TODO' }}</Tag>
       <span class="middle__published-year">TODO</span>
       <PlatformTags :tags="todoPlatforms" />
-      <FollowButton class="middle__follow" :on-click="onFollow" />
+      <FollowButton
+        class="middle__follow"
+        data-testid="middle__follow"
+        :on-click="() => emit('follow', leaderboardDetail.id)"
+      />
     </div>
     <div class="bottom">
       <BaseButton class="bottom__button" to="">
@@ -61,9 +66,18 @@ defineProps<LeaderboardDetailProps>()
         <i-svg-menu />
         <div>Resources</div>
       </BaseButton>
-      <BaseButton class="bottom__button" @click="onToggleMore">
-        <div>More &or;</div>
-      </BaseButton>
+      <DropDown class="bottom__button">
+        <template #toggler>
+          <span>More v</span>
+        </template>
+        <DropDownContent>
+          <DropDownItem>
+            <div class="w-full text-center">First</div>
+          </DropDownItem>
+          <DropDownItem>Second</DropDownItem>
+          <DropDownItem>Third</DropDownItem>
+        </DropDownContent>
+      </DropDown>
       <SocialButtons :socials="socials" />
     </div>
   </div>
diff --git a/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts b/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts
new file mode 100644
index 00000000..c0f2a13a
--- /dev/null
+++ b/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts
@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+import PlatformTags from './PlatformTags.vue'
+
+describe('<PlatformTags />', () => {
+  it('should render without crashing', () => {
+    const wrapper = mount(PlatformTags, {
+      props: {
+        tags: ['XBox', 'PS4', 'Amiga DS'],
+      },
+    })
+
+    expect(wrapper.isVisible()).toBe(true)
+  })
+})
diff --git a/components/blocks/LeaderboardDetails/PlatformTags.vue b/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.vue
similarity index 88%
rename from components/blocks/LeaderboardDetails/PlatformTags.vue
rename to components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.vue
index df5d7b75..efdf8c68 100644
--- a/components/blocks/LeaderboardDetails/PlatformTags.vue
+++ b/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Tag from 'elements/tags/Tag/tag.vue'
+import Tag from 'elements/tags/Tag/Tag.vue'
 interface PlatformTagsProps {
   tags: string[]
 }
diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
new file mode 100644
index 00000000..c5f36d10
--- /dev/null
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils'
+import DropDown from './DropDown.vue'
+
+describe.skip('<LeaderboardDetails />', () => {
+  it('should render without crashing', () => {
+    const wrapper = mount(DropDown)
+    expect(wrapper.isVisible()).toBe(true)
+  })
+})
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
new file mode 100644
index 00000000..16d69872
--- /dev/null
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import BaseButton from '../BaseButton/BaseButton.vue'
+
+export interface SharedState {
+  active: Ref<boolean>
+}
+
+const sharedState: SharedState = { active: ref(true) }
+provide('state', sharedState)
+
+function toggle() {
+  sharedState.active.value = !sharedState.active.value
+}
+
+function dismiss() {
+  sharedState.active.value = false
+}
+</script>
+
+<template>
+  <BaseButton
+    class="button__toggler"
+    @click="toggle"
+    @keyup.enter="toggle"
+    @keyup.space="toggle"
+    @keyup.esc="dismiss"
+  >
+    <slot name="toggler">Toggle</slot>
+  </BaseButton>
+  <slot />
+</template>
+
+<style lang="postcss" scoped>
+.button__toggler {
+  @apply bg-slate-50 hover:bg-slate-200;
+}
+</style>
diff --git a/components/elements/buttons/DropDown/DropDownContent.vue b/components/elements/buttons/DropDown/DropDownContent.vue
new file mode 100644
index 00000000..98e14893
--- /dev/null
+++ b/components/elements/buttons/DropDown/DropDownContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import type { SharedState } from './DropDown.vue'
+const sharedState: SharedState = inject('state', { active: ref(false) })
+</script>
+
+<template>
+  <div v-if="sharedState.active.value" class="drop-down-content__container">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.drop-down-content__container {
+  @apply flex flex-col;
+}
+</style>
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
new file mode 100644
index 00000000..502191e4
--- /dev/null
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts" />
+
+<template>
+  <div class="container">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.container {
+  @apply bg-stone-500;
+}
+</style>
diff --git a/pages/board/[slug].vue b/pages/board/[slug].vue
index b9ffad25..7206328b 100644
--- a/pages/board/[slug].vue
+++ b/pages/board/[slug].vue
@@ -8,12 +8,11 @@ const leaderboardSlug = route.params.slug as string
 const leaderboardDetail = await useGetLeaderboardDetail(leaderboardSlug)
 </script>
 
-<!-- TODO: Handle 404 case. <Info> shouldn't render, instead rendering an error page. -->
 <template>
   <div>
     <Loader v-if="leaderboardDetail.loading"></Loader>
     <Info
-      v-if="!leaderboardDetail.loading"
+      v-if="!leaderboardDetail.loading && leaderboardDetail.data != null"
       :leaderboard-detail="leaderboardDetail.data!"
     />
   </div>

From 59cf56f953936f40ad0347dea5d233e162d00e93 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 31 Mar 2024 22:12:27 +0800
Subject: [PATCH 05/25] Swap component use and add styles

---
 .../LeaderboardDetails/LeaderboardDetails.vue      | 14 ++++++--------
 components/elements/buttons/DropDown/DropDown.vue  | 14 ++------------
 .../elements/buttons/DropDown/DropDownContent.vue  |  1 +
 .../elements/buttons/DropDown/DropDownItem.vue     |  9 ++++++---
 4 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
index b8c8be86..12764900 100644
--- a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
+++ b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
+import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
 import DropDown from 'elements/buttons/DropDown/DropDown.vue'
 import DropDownContent from 'elements/buttons/DropDown/DropDownContent.vue'
 import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
@@ -58,22 +58,20 @@ defineProps<LeaderboardDetailProps>()
       />
     </div>
     <div class="bottom">
-      <BaseButton class="bottom__button" to="">
+      <ButtonLink class="bottom__button" to="#">
         <i-svg-menu />
         <span>Guides</span>
-      </BaseButton>
-      <BaseButton class="bottom__button" to="">
+      </ButtonLink>
+      <ButtonLink class="bottom__button" to="#">
         <i-svg-menu />
         <div>Resources</div>
-      </BaseButton>
+      </ButtonLink>
       <DropDown class="bottom__button">
         <template #toggler>
           <span>More v</span>
         </template>
         <DropDownContent>
-          <DropDownItem>
-            <div class="w-full text-center">First</div>
-          </DropDownItem>
+          <DropDownItem>First</DropDownItem>
           <DropDownItem>Second</DropDownItem>
           <DropDownItem>Third</DropDownItem>
         </DropDownContent>
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index 16d69872..a686ba5b 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -5,26 +5,16 @@ export interface SharedState {
   active: Ref<boolean>
 }
 
-const sharedState: SharedState = { active: ref(true) }
+const sharedState: SharedState = { active: ref(false) }
 provide('state', sharedState)
 
 function toggle() {
   sharedState.active.value = !sharedState.active.value
 }
-
-function dismiss() {
-  sharedState.active.value = false
-}
 </script>
 
 <template>
-  <BaseButton
-    class="button__toggler"
-    @click="toggle"
-    @keyup.enter="toggle"
-    @keyup.space="toggle"
-    @keyup.esc="dismiss"
-  >
+  <BaseButton class="button__toggler" v-bind="$attrs" @click="toggle">
     <slot name="toggler">Toggle</slot>
   </BaseButton>
   <slot />
diff --git a/components/elements/buttons/DropDown/DropDownContent.vue b/components/elements/buttons/DropDown/DropDownContent.vue
index 98e14893..6e86b573 100644
--- a/components/elements/buttons/DropDown/DropDownContent.vue
+++ b/components/elements/buttons/DropDown/DropDownContent.vue
@@ -13,5 +13,6 @@ const sharedState: SharedState = inject('state', { active: ref(false) })
 <style lang="postcss" scoped>
 .drop-down-content__container {
   @apply flex flex-col;
+  @apply border border-gray-200 border-t-0;
 }
 </style>
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 502191e4..18def28c 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts" />
 
 <template>
-  <div class="container">
+  <button class="container">
     <slot />
-  </div>
+  </button>
 </template>
 
 <style lang="postcss" scoped>
 .container {
-  @apply bg-stone-500;
+  @apply py-2 text-center hover:bg-gray-100;
+}
+.container:not(:last-child) {
+  @apply border-gray-200 border-b;
 }
 </style>

From 4f2a4f3bf5d8cd474d46ec1ac82e35b0b967d5dc Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Mon, 1 Apr 2024 23:04:52 +0800
Subject: [PATCH 06/25] Allow styles to be passed to DropDown

---
 .../LeaderboardDetails/LeaderboardDetails.vue |  6 ++----
 .../elements/buttons/DropDown/DropDown.vue    | 21 +++++++++++++++----
 public/icons/arrows/down.svg                  | 10 +++++++++
 3 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 public/icons/arrows/down.svg

diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
index 12764900..a68755ce 100644
--- a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
+++ b/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
@@ -67,9 +67,6 @@ defineProps<LeaderboardDetailProps>()
         <div>Resources</div>
       </ButtonLink>
       <DropDown class="bottom__button">
-        <template #toggler>
-          <span>More v</span>
-        </template>
         <DropDownContent>
           <DropDownItem>First</DropDownItem>
           <DropDownItem>Second</DropDownItem>
@@ -110,7 +107,8 @@ defineProps<LeaderboardDetailProps>()
   & .bottom {
     @apply md:w-full md:p-4;
 
-    & .bottom__button {
+    & .bottom__button,
+    & :deep(button.bottom__button) {
       @apply w-full flex flex-row place-content-center gap-2 hover:bg-gray-100;
       @apply md:mr-1 md:my-1 md:p-1;
       @apply border-gray-200 border-2 rounded;
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index a686ba5b..fadd0150 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -14,14 +14,27 @@ function toggle() {
 </script>
 
 <template>
-  <BaseButton class="button__toggler" v-bind="$attrs" @click="toggle">
-    <slot name="toggler">Toggle</slot>
+  <!-- TODO: Come up with a good way to set active bg colour -->
+  <BaseButton v-bind="$attrs" @click="toggle">
+    <div class="container">
+      More
+      <img
+        src="/public/icons/arrows/down.svg"
+        alt="Dropdown arrow"
+        width="10"
+        :class="sharedState.active.value && 'selected'"
+      />
+    </div>
   </BaseButton>
   <slot />
 </template>
 
 <style lang="postcss" scoped>
-.button__toggler {
-  @apply bg-slate-50 hover:bg-slate-200;
+.container {
+  @apply flex flex-row justify-center items-center gap-2;
+
+  & img.selected {
+    @apply rotate-180;
+  }
 }
 </style>
diff --git a/public/icons/arrows/down.svg b/public/icons/arrows/down.svg
new file mode 100644
index 00000000..4b3d7822
--- /dev/null
+++ b/public/icons/arrows/down.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8">
+  <polyline
+    points="1,1 7,7 13,1"
+    fill="none"
+    stroke="black"
+    stroke-width="2"
+    stroke-linejoin="miter"
+    stroke-linecap="round"
+  />
+</svg>

From ef21a9d3462f067e377cde37d59cb62034b61433 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Wed, 3 Apr 2024 22:20:59 +0800
Subject: [PATCH 07/25] Rename LeaderboardDetails to LeaderboardInfo

---
 .vscode/launch.json                           | 21 +++++++++++++++++++
 .../LeaderboardInfo.test.ts}                  | 14 ++++++-------
 .../LeaderboardInfo.vue}                      | 16 +++++++-------
 .../PlatformTags/PlatformTags.test.ts         |  0
 .../PlatformTags/PlatformTags.vue             |  0
 .../buttons/DropDown/DropDown.test.ts         |  2 +-
 pages/board/[slug].vue                        |  6 +++---
 7 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 .vscode/launch.json
 rename components/blocks/{LeaderboardDetails/LeaderboardDetails.test.ts => LeaderboardInfo/LeaderboardInfo.test.ts} (78%)
 rename components/blocks/{LeaderboardDetails/LeaderboardDetails.vue => LeaderboardInfo/LeaderboardInfo.vue} (89%)
 rename components/blocks/{LeaderboardDetails => LeaderboardInfo}/PlatformTags/PlatformTags.test.ts (100%)
 rename components/blocks/{LeaderboardDetails => LeaderboardInfo}/PlatformTags/PlatformTags.vue (100%)

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..ba921f6e
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "firefox",
+      "request": "launch",
+      "name": "Vue",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}",
+      "pathMappings": [
+        {
+          "url": "webpack:///src/",
+          "path": "${webRoot}/"
+        }
+      ]
+    }
+  ]
+}
diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
similarity index 78%
rename from components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts
rename to components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
index 75782379..ca086447 100644
--- a/components/blocks/LeaderboardDetails/LeaderboardDetails.test.ts
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
@@ -1,12 +1,12 @@
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
-import LeaderboardDetails from './LeaderboardDetails.vue'
+import LeaderboardInfo from './LeaderboardInfo.vue'
 
-describe.skip('<LeaderboardDetails />', () => {
-  function getLeaderboardDetailsWrapper() {
-    return mount(LeaderboardDetails, {
+describe.skip('<LeaderboardInfo />', () => {
+  function getLeaderboardInfoWrapper() {
+    return mount(LeaderboardInfo, {
       props: {
-        leaderboardDetail: {
+        leaderboard: {
           categories: [],
           id: 1,
           name: 'Stuck in the Train Simulator 2',
@@ -40,12 +40,12 @@ describe.skip('<LeaderboardDetails />', () => {
   enableAutoUnmount(afterEach)
 
   it('should render without crashing', () => {
-    const wrapper = getLeaderboardDetailsWrapper()
+    const wrapper = getLeaderboardInfoWrapper()
     expect(wrapper.isVisible()).toBe(true)
   })
 
   it('should trigger follow button', async () => {
-    const wrapper = getLeaderboardDetailsWrapper()
+    const wrapper = getLeaderboardInfoWrapper()
     await getByTestId(wrapper, 'middle__follow').trigger('click')
     expect(wrapper.emitted().follow?.[0]).toEqual([1])
   })
diff --git a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
similarity index 89%
rename from components/blocks/LeaderboardDetails/LeaderboardDetails.vue
rename to components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index a68755ce..c087bb19 100644
--- a/components/blocks/LeaderboardDetails/LeaderboardDetails.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -9,8 +9,8 @@ import Tag from 'elements/tags/Tag/Tag.vue'
 import PlatformTags from './PlatformTags/PlatformTags.vue'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
-interface LeaderboardDetailProps {
-  leaderboardDetail: LeaderboardViewModel
+interface LeaderboardInfoProps {
+  leaderboard: LeaderboardViewModel
 }
 
 // TODO: Remove this. Get from model instead.
@@ -40,21 +40,21 @@ const socials: Socials[] = [
   },
 ]
 
-defineProps<LeaderboardDetailProps>()
+defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
-  <div class="leaderboard-details">
-    <div class="title">{{ leaderboardDetail.name }}</div>
+  <div class="leaderboard-info">
+    <div class="title">{{ leaderboard.name }}</div>
     <div class="middle">
       <img src="https://via.placeholder.com/220x220" alt="game-art" />
-      <Tag>{{ leaderboardDetail.categories[0] ?? 'TODO' }}</Tag>
+      <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
       <span class="middle__published-year">TODO</span>
       <PlatformTags :tags="todoPlatforms" />
       <FollowButton
         class="middle__follow"
         data-testid="middle__follow"
-        :on-click="() => emit('follow', leaderboardDetail.id)"
+        :on-click="() => emit('follow', leaderboard.id)"
       />
     </div>
     <div class="bottom">
@@ -79,7 +79,7 @@ defineProps<LeaderboardDetailProps>()
 </template>
 
 <style lang="postcss" scoped>
-.leaderboard-details {
+.leaderboard-info {
   @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
   @apply flex flex-col items-center;
   @apply border-gray-200 border-2 rounded;
diff --git a/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
similarity index 100%
rename from components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.test.ts
rename to components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
diff --git a/components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.vue b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
similarity index 100%
rename from components/blocks/LeaderboardDetails/PlatformTags/PlatformTags.vue
rename to components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index c5f36d10..ef100bc3 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import DropDown from './DropDown.vue'
 
-describe.skip('<LeaderboardDetails />', () => {
+describe.skip('<DropDown />', () => {
   it('should render without crashing', () => {
     const wrapper = mount(DropDown)
     expect(wrapper.isVisible()).toBe(true)
diff --git a/pages/board/[slug].vue b/pages/board/[slug].vue
index 7206328b..0a6bc81d 100644
--- a/pages/board/[slug].vue
+++ b/pages/board/[slug].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Info from 'blocks/LeaderboardDetails/LeaderboardDetails.vue'
+import LeaderboardInfo from 'blocks/LeaderboardInfo/LeaderboardInfo.vue'
 import Loader from 'blocks/Loader/Loader.vue'
 import { useGetLeaderboardDetail } from 'composables/api/useGetLeaderboardDetail'
 
@@ -11,9 +11,9 @@ const leaderboardDetail = await useGetLeaderboardDetail(leaderboardSlug)
 <template>
   <div>
     <Loader v-if="leaderboardDetail.loading"></Loader>
-    <Info
+    <LeaderboardInfo
       v-if="!leaderboardDetail.loading && leaderboardDetail.data != null"
-      :leaderboard-detail="leaderboardDetail.data!"
+      :leaderboard="leaderboardDetail.data!"
     />
   </div>
 </template>

From 5a2395948ff90e03a31dd5caa436e7e26fe904dc Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 14 Apr 2024 15:26:38 +0800
Subject: [PATCH 08/25] Create separate components for mobile and desktop views

---
 .../LeaderboardInfo/LeaderboardInfo.vue       | 103 ++++--------------
 .../LeaderboardInfoDesktop.vue                |  94 ++++++++++++++++
 .../LeaderboardInfoMobile.vue                 |  78 +++++++++++++
 3 files changed, 196 insertions(+), 79 deletions(-)
 create mode 100644 components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue
 create mode 100644 components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue

diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index c087bb19..52b06497 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import DropDown from 'elements/buttons/DropDown/DropDown.vue'
-import DropDownContent from 'elements/buttons/DropDown/DropDownContent.vue'
-import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
-import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
-import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
-import Tag from 'elements/tags/Tag/Tag.vue'
-import PlatformTags from './PlatformTags/PlatformTags.vue'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from 'root/tailwind.config'
+import LeaderboardInfoDesktop from './LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue'
+import LeaderboardInfoMobile from './LeaderboardInfoMobile/LeaderboardInfoMobile.vue'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
-interface LeaderboardInfoProps {
+export interface LeaderboardInfoProps {
   leaderboard: LeaderboardViewModel
 }
 
@@ -40,79 +36,28 @@ const socials: Socials[] = [
   },
 ]
 
+const isMobile =
+  window.innerWidth <=
+  parseInt(resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''), 10)
+
 defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
-  <div class="leaderboard-info">
-    <div class="title">{{ leaderboard.name }}</div>
-    <div class="middle">
-      <img src="https://via.placeholder.com/220x220" alt="game-art" />
-      <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
-      <span class="middle__published-year">TODO</span>
-      <PlatformTags :tags="todoPlatforms" />
-      <FollowButton
-        class="middle__follow"
-        data-testid="middle__follow"
-        :on-click="() => emit('follow', leaderboard.id)"
-      />
-    </div>
-    <div class="bottom">
-      <ButtonLink class="bottom__button" to="#">
-        <i-svg-menu />
-        <span>Guides</span>
-      </ButtonLink>
-      <ButtonLink class="bottom__button" to="#">
-        <i-svg-menu />
-        <div>Resources</div>
-      </ButtonLink>
-      <DropDown class="bottom__button">
-        <DropDownContent>
-          <DropDownItem>First</DropDownItem>
-          <DropDownItem>Second</DropDownItem>
-          <DropDownItem>Third</DropDownItem>
-        </DropDownContent>
-      </DropDown>
-      <SocialButtons :socials="socials" />
-    </div>
-  </div>
+  <LeaderboardInfoDesktop
+    v-if="!isMobile"
+    :leaderboard="leaderboard"
+    :todo-platforms="todoPlatforms"
+    :on-click="() => emit('follow', leaderboard.id)"
+    :socials="socials"
+  />
+  <LeaderboardInfoMobile
+    v-if="isMobile"
+    :leaderboard="leaderboard"
+    :todo-platforms="todoPlatforms"
+    :on-click="() => emit('follow', leaderboard.id)"
+    :socials="socials"
+  />
 </template>
 
-<style lang="postcss" scoped>
-.leaderboard-info {
-  @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
-  @apply flex flex-col items-center;
-  @apply border-gray-200 border-2 rounded;
-
-  & .title {
-    @apply w-full text-center;
-    @apply font-bold text-lg md:p-3;
-    @apply border-b-gray-200 border-b-2;
-  }
-
-  & .middle {
-    @apply md:m-4;
-    @apply flex flex-col items-center;
-    @apply border-b-gray-200 border-b-2;
-
-    & .middle__published-year {
-      @apply text-sm;
-    }
-
-    & .middle__follow {
-      @apply md:m-4;
-    }
-  }
-
-  & .bottom {
-    @apply md:w-full md:p-4;
-
-    & .bottom__button,
-    & :deep(button.bottom__button) {
-      @apply w-full flex flex-row place-content-center gap-2 hover:bg-gray-100;
-      @apply md:mr-1 md:my-1 md:p-1;
-      @apply border-gray-200 border-2 rounded;
-    }
-  }
-}
-</style>
+<style lang="postcss" scoped></style>
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue b/components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue
new file mode 100644
index 00000000..43fb95e6
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
+import DropDown from 'elements/buttons/DropDown/DropDown.vue'
+import DropDownContent from 'elements/buttons/DropDown/DropDownContent.vue'
+import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
+import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
+import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
+import Tag from 'elements/tags/Tag/Tag.vue'
+import PlatformTags from '../PlatformTags/PlatformTags.vue'
+import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
+
+interface Props extends LeaderboardInfoProps {
+  todoPlatforms: string[]
+  onClick: () => void
+  socials: Socials[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="leaderboard-info">
+    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
+    <div class="title">{{ leaderboard.name || 'Game Name' }}</div>
+    <div class="middle">
+      <img src="https://via.placeholder.com/220x220" alt="game-art" />
+      <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
+      <span class="middle__published-year">YEAR</span>
+      <PlatformTags :tags="todoPlatforms" />
+      <FollowButton
+        class="middle__follow"
+        data-testid="middle__follow"
+        :on-click="onClick"
+      />
+    </div>
+    <div class="bottom">
+      <ButtonLink class="bottom__button" to="#">
+        <i-svg-menu />
+        <span>Guides</span>
+      </ButtonLink>
+      <ButtonLink class="bottom__button" to="#">
+        <i-svg-menu />
+        <div>Resources</div>
+      </ButtonLink>
+      <DropDown class="bottom__button">
+        <DropDownContent>
+          <DropDownItem>First</DropDownItem>
+          <DropDownItem>Second</DropDownItem>
+          <DropDownItem>Third</DropDownItem>
+        </DropDownContent>
+      </DropDown>
+      <SocialButtons :socials="socials" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.leaderboard-info {
+  @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
+  @apply flex flex-col items-center;
+  @apply border-gray-200 border-2 rounded;
+
+  & .title {
+    @apply w-full text-center;
+    @apply font-bold text-lg md:p-3;
+    @apply border-b-gray-200 border-b-2;
+  }
+
+  & .middle {
+    @apply md:m-4;
+    @apply flex flex-col items-center;
+    @apply border-b-gray-200 border-b-2;
+
+    & .middle__published-year {
+      @apply text-sm;
+    }
+
+    & .middle__follow {
+      @apply md:m-4;
+    }
+  }
+
+  & .bottom {
+    @apply md:w-full md:p-4;
+
+    & .bottom__button,
+    & :deep(button.bottom__button) {
+      @apply w-full flex flex-row place-content-center gap-2 hover:bg-gray-100;
+      @apply md:mr-1 md:my-1 md:p-1;
+      @apply border-gray-200 border-2 rounded;
+    }
+  }
+}
+</style>
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue b/components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue
new file mode 100644
index 00000000..3ca6e7ae
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
+import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
+import Tag from 'elements/tags/Tag/Tag.vue'
+import PlatformTags from '../PlatformTags/PlatformTags.vue'
+import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
+
+interface Props extends LeaderboardInfoProps {
+  todoPlatforms: string[]
+  onClick: () => void
+  socials: Socials[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="leaderboard-info">
+    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
+    <div class="top">
+      <div class="top__title">{{ leaderboard.name || 'Game Name' }}</div>
+      <div class="top__button-container">
+        <FollowButton
+          class="top__button top__button__follow"
+          data-testid="top__button__follow"
+          :on-click="onClick"
+        />
+        <ButtonLink
+          class="top__button top__button__submit"
+          data-testid="top__button__submit"
+          to="#"
+        >
+          <span>Submit Run</span>
+        </ButtonLink>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="bottom__category-year">
+        <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
+        <span class="bottom__published-year">YEAR</span>
+      </div>
+      <PlatformTags :tags="todoPlatforms" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.leaderboard-info {
+  @apply h-[fit-content] w-full relative;
+  @apply flex flex-col gap-2;
+  @apply border-gray-200 border-2 rounded;
+  @apply p-4;
+
+  & .top {
+    @apply flex justify-between items-start;
+  }
+
+  & .top__title {
+    @apply font-bold text-lg;
+  }
+
+  & .top__button-container {
+    @apply flex gap-1;
+  }
+
+  & .top__button__submit {
+    @apply bg-gray-100;
+  }
+
+  & .bottom {
+    @apply flex justify-between items-center;
+  }
+
+  & .bottom__category-year {
+    @apply flex gap-2 items-center text-sm;
+  }
+}
+</style>

From d15c2f09d4baabe119665f62360ece05806c4bdf Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 14 Apr 2024 15:27:08 +0800
Subject: [PATCH 09/25] Miscellaneous style and attribute tweaks

---
 .../blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue   | 2 +-
 components/elements/buttons/ButtonLink/ButtonLink.vue      | 7 ++++++-
 components/elements/buttons/DropDown/DropDown.vue          | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
index efdf8c68..ae069c42 100644
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
+++ b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
@@ -17,6 +17,6 @@ defineProps<PlatformTagsProps>()
 
 <style lang="postcss" scoped>
 .platform-tags {
-  @apply flex flex-row place-content-center;
+  @apply flex flex-row place-content-center gap-1;
 }
 </style>
diff --git a/components/elements/buttons/ButtonLink/ButtonLink.vue b/components/elements/buttons/ButtonLink/ButtonLink.vue
index 9e93d234..e06763ac 100644
--- a/components/elements/buttons/ButtonLink/ButtonLink.vue
+++ b/components/elements/buttons/ButtonLink/ButtonLink.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts"></script>
 
 <template>
-  <NuxtLink class="button-link" v-bind="$attrs" data-testid="button-link">
+  <NuxtLink
+    class="button-link"
+    v-bind="$attrs"
+    data-testid="button-link"
+    role="button"
+  >
     <slot>Placeholder Link Text</slot>
   </NuxtLink>
 </template>
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index fadd0150..afa7c12b 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -19,7 +19,7 @@ function toggle() {
     <div class="container">
       More
       <img
-        src="/public/icons/arrows/down.svg"
+        src="/icons/arrows/down.svg"
         alt="Dropdown arrow"
         width="10"
         :class="sharedState.active.value && 'selected'"

From ffff05434bdbb91b7d3b6630de72111a8a564d8e Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 19 Apr 2024 21:50:04 +0800
Subject: [PATCH 10/25] Add missing icons And some substitutes, really

---
 assets/sprite/svg/book.svg      | 4 ++++
 assets/sprite/svg/link.svg      | 4 ++++
 components.d.ts                 | 2 ++
 public/icons/social/globe.svg   | 4 ++++
 public/icons/social/message.svg | 4 ++++
 5 files changed, 18 insertions(+)
 create mode 100644 assets/sprite/svg/book.svg
 create mode 100644 assets/sprite/svg/link.svg
 create mode 100644 public/icons/social/globe.svg
 create mode 100644 public/icons/social/message.svg

diff --git a/assets/sprite/svg/book.svg b/assets/sprite/svg/book.svg
new file mode 100644
index 00000000..27304272
--- /dev/null
+++ b/assets/sprite/svg/book.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
+</svg>
diff --git a/assets/sprite/svg/link.svg b/assets/sprite/svg/link.svg
new file mode 100644
index 00000000..ecca03ec
--- /dev/null
+++ b/assets/sprite/svg/link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>
+</svg>
diff --git a/components.d.ts b/components.d.ts
index 0c95ff40..3683fc44 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ISvgBook: typeof import('~icons/svg/book')['default']
     ISvgCircleCheck: typeof import('~icons/svg/circle-check')['default']
     ISvgCircleExclamation: typeof import('~icons/svg/circle-exclamation')['default']
     ISvgCircleInfo: typeof import('~icons/svg/circle-info')['default']
@@ -14,6 +15,7 @@ declare module 'vue' {
     ISvgClose: typeof import('~icons/svg/close')['default']
     ISvgEyeHidden: typeof import('~icons/svg/eye-hidden')['default']
     ISvgEyeVisible: typeof import('~icons/svg/eye-visible')['default']
+    ISvgLink: typeof import('~icons/svg/link')['default']
     ISvgMenu: typeof import('~icons/svg/menu')['default']
     ISvgSearch: typeof import('~icons/svg/search')['default']
     ISvgSpinner: typeof import('~icons/svg/spinner')['default']
diff --git a/public/icons/social/globe.svg b/public/icons/social/globe.svg
new file mode 100644
index 00000000..279e597e
--- /dev/null
+++ b/public/icons/social/globe.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
+</svg>
diff --git a/public/icons/social/message.svg b/public/icons/social/message.svg
new file mode 100644
index 00000000..638e1713
--- /dev/null
+++ b/public/icons/social/message.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64h96v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z"/>
+</svg>

From 38fb57a56a3056364fd50fcc836b7f07172b34fc Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 19 Apr 2024 21:59:28 +0800
Subject: [PATCH 11/25] Rename components

---
 .../LeaderboardInfoDesktop.vue => Desktop/Desktop.vue}    | 0
 components/blocks/LeaderboardInfo/LeaderboardInfo.vue     | 8 ++++----
 .../LeaderboardInfoMobile.vue => Mobile/Mobile.vue}       | 0
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename components/blocks/LeaderboardInfo/{LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue => Desktop/Desktop.vue} (100%)
 rename components/blocks/LeaderboardInfo/{LeaderboardInfoMobile/LeaderboardInfoMobile.vue => Mobile/Mobile.vue} (100%)

diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
similarity index 100%
rename from components/blocks/LeaderboardInfo/LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue
rename to components/blocks/LeaderboardInfo/Desktop/Desktop.vue
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index 52b06497..0a4bfc42 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from 'root/tailwind.config'
-import LeaderboardInfoDesktop from './LeaderboardInfoDesktop/LeaderboardInfoDesktop.vue'
-import LeaderboardInfoMobile from './LeaderboardInfoMobile/LeaderboardInfoMobile.vue'
+import Desktop from './Desktop/Desktop.vue'
+import Mobile from './Mobile/Mobile.vue'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
 export interface LeaderboardInfoProps {
@@ -44,14 +44,14 @@ defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
-  <LeaderboardInfoDesktop
+  <Desktop
     v-if="!isMobile"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
     :on-click="() => emit('follow', leaderboard.id)"
     :socials="socials"
   />
-  <LeaderboardInfoMobile
+  <Mobile
     v-if="isMobile"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
similarity index 100%
rename from components/blocks/LeaderboardInfo/LeaderboardInfoMobile/LeaderboardInfoMobile.vue
rename to components/blocks/LeaderboardInfo/Mobile/Mobile.vue

From 7a427018aa5e9efdf7d78cce6e93ba31afd2b7d9 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 19 Apr 2024 22:05:43 +0800
Subject: [PATCH 12/25] Use icons in components

---
 components/blocks/LeaderboardInfo/Desktop/Desktop.vue |  4 ++--
 components/blocks/LeaderboardInfo/LeaderboardInfo.vue | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index 43fb95e6..e607b5aa 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -35,11 +35,11 @@ defineProps<Props>()
     </div>
     <div class="bottom">
       <ButtonLink class="bottom__button" to="#">
-        <i-svg-menu />
+        <i-svg-book />
         <span>Guides</span>
       </ButtonLink>
       <ButtonLink class="bottom__button" to="#">
-        <i-svg-menu />
+        <i-svg-link />
         <div>Resources</div>
       </ButtonLink>
       <DropDown class="bottom__button">
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index 0a4bfc42..fdc78425 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -25,15 +25,20 @@ const socials: Socials[] = [
     url: 'https://twitch.tv',
   },
   {
-    icon: 'youtube', // TODO: Add a globe SVG. Maybe from Icons8
-    name: 'Socials',
-    url: 'https://example.com',
+    icon: 'globe',
+    name: 'Site',
+    url: '#',
   },
   {
     icon: 'discord',
     name: 'Discord',
     url: 'https://discord.gg',
   },
+  {
+    icon: 'message',
+    name: 'Message',
+    url: '#',
+  },
 ]
 
 const isMobile =

From d700ee147cc12b4e89c12b9f2d065206db8d10a6 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 19 Apr 2024 22:13:42 +0800
Subject: [PATCH 13/25] Move socials array into Desktop component

---
 .../LeaderboardInfo/Desktop/Desktop.vue       | 25 +++++++++++++++++-
 .../LeaderboardInfo/LeaderboardInfo.vue       | 26 -------------------
 .../blocks/LeaderboardInfo/Mobile/Mobile.vue  |  1 -
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index e607b5aa..e5312c53 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -12,9 +12,32 @@ import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
 interface Props extends LeaderboardInfoProps {
   todoPlatforms: string[]
   onClick: () => void
-  socials: Socials[]
 }
 
+// TODO: Get actual links tied to the leaderboard
+const socials: Socials[] = [
+  {
+    icon: 'twitch',
+    name: 'Twitch',
+    url: 'https://twitch.tv',
+  },
+  {
+    icon: 'globe',
+    name: 'Site',
+    url: '#',
+  },
+  {
+    icon: 'discord',
+    name: 'Discord',
+    url: 'https://discord.gg',
+  },
+  {
+    icon: 'message',
+    name: 'Message',
+    url: '#',
+  },
+]
+
 defineProps<Props>()
 </script>
 
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index fdc78425..da12a37b 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -17,30 +17,6 @@ const emit = defineEmits<{
   (event: 'follow', leaderboardId: number): void
 }>()
 
-// TODO: Get actual links tied to the leaderboard
-const socials: Socials[] = [
-  {
-    icon: 'twitch',
-    name: 'Twitch',
-    url: 'https://twitch.tv',
-  },
-  {
-    icon: 'globe',
-    name: 'Site',
-    url: '#',
-  },
-  {
-    icon: 'discord',
-    name: 'Discord',
-    url: 'https://discord.gg',
-  },
-  {
-    icon: 'message',
-    name: 'Message',
-    url: '#',
-  },
-]
-
 const isMobile =
   window.innerWidth <=
   parseInt(resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''), 10)
@@ -54,14 +30,12 @@ defineProps<LeaderboardInfoProps>()
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
     :on-click="() => emit('follow', leaderboard.id)"
-    :socials="socials"
   />
   <Mobile
     v-if="isMobile"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
     :on-click="() => emit('follow', leaderboard.id)"
-    :socials="socials"
   />
 </template>
 
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
index 3ca6e7ae..3b81425c 100644
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
+++ b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
@@ -8,7 +8,6 @@ import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
 interface Props extends LeaderboardInfoProps {
   todoPlatforms: string[]
   onClick: () => void
-  socials: Socials[]
 }
 
 defineProps<Props>()

From 07cf2e8aedba41b39f55960bdda4473049634ac0 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 21 Apr 2024 17:43:19 +0800
Subject: [PATCH 14/25] Fix component styling Sorry this is a huge commit

---
 .../LeaderboardInfo/Desktop/Desktop.vue       | 97 +++++++++++--------
 .../elements/buttons/DropDown/DropDown.vue    | 42 +++++---
 .../buttons/DropDown/DropDownContent.vue      |  3 +-
 .../buttons/DropDown/DropDownItem.vue         |  6 +-
 .../buttons/SocialButtons/SocialButtons.vue   | 18 ++--
 5 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index e5312c53..ef427847 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -45,72 +45,91 @@ defineProps<Props>()
   <div class="leaderboard-info">
     <!-- TODO: Do not provide defaults and instead return nothing if on production -->
     <div class="title">{{ leaderboard.name || 'Game Name' }}</div>
-    <div class="middle">
-      <img src="https://via.placeholder.com/220x220" alt="game-art" />
+    <div class="body">
+      <img
+        src="https://via.placeholder.com/220x220"
+        alt="game-art"
+        class="body__game-art"
+      />
       <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
-      <span class="middle__published-year">YEAR</span>
+      <span class="body__published-year">YEAR</span>
       <PlatformTags :tags="todoPlatforms" />
       <FollowButton
-        class="middle__follow"
-        data-testid="middle__follow"
+        class="body__follow"
+        data-testid="body__follow"
         :on-click="onClick"
       />
-    </div>
-    <div class="bottom">
-      <ButtonLink class="bottom__button" to="#">
-        <i-svg-book />
-        <span>Guides</span>
-      </ButtonLink>
-      <ButtonLink class="bottom__button" to="#">
-        <i-svg-link />
-        <div>Resources</div>
-      </ButtonLink>
-      <DropDown class="bottom__button">
-        <DropDownContent>
-          <DropDownItem>First</DropDownItem>
-          <DropDownItem>Second</DropDownItem>
-          <DropDownItem>Third</DropDownItem>
-        </DropDownContent>
-      </DropDown>
+      <div class="body__divider" />
+      <div class="body__internal-link-buttons">
+        <ButtonLink class="body__internal-link-buttons__button" to="#">
+          <i-svg-book />
+          <span>Guides</span>
+        </ButtonLink>
+        <ButtonLink class="body__internal-link-buttons__button" to="#">
+          <i-svg-link />
+          <div>Resources</div>
+        </ButtonLink>
+        <DropDown class-name="body__internal-link-buttons__button">
+          <DropDownContent>
+            <DropDownItem>First</DropDownItem>
+            <DropDownItem>Second</DropDownItem>
+            <DropDownItem>Third</DropDownItem>
+          </DropDownContent>
+        </DropDown>
+      </div>
       <SocialButtons :socials="socials" />
     </div>
   </div>
 </template>
 
 <style lang="postcss" scoped>
+.icon {
+  @apply w-2;
+}
+
 .leaderboard-info {
   @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
   @apply flex flex-col items-center;
-  @apply border-gray-200 border-2 rounded;
+  @apply border-gray-300 border rounded;
 
   & .title {
     @apply w-full text-center;
-    @apply font-bold text-lg md:p-3;
+    @apply font-bold text-lg p-3;
     @apply border-b-gray-200 border-b-2;
   }
 
-  & .middle {
-    @apply md:m-4;
-    @apply flex flex-col items-center;
-    @apply border-b-gray-200 border-b-2;
+  & .body {
+    @apply m-4;
+    @apply flex flex-col items-center gap-1;
 
-    & .middle__published-year {
+    & .body__game-art {
+      @apply my-1 px-8;
+    }
+
+    & .body__published-year {
       @apply text-sm;
     }
 
-    & .middle__follow {
-      @apply md:m-4;
+    & .body__follow {
+      @apply mt-3;
     }
-  }
 
-  & .bottom {
-    @apply md:w-full md:p-4;
+    & .body__divider {
+      @apply border-b border-gray-300 w-full my-3;
+    }
+
+    & .body__internal-link-buttons {
+      @apply w-full flex flex-col mb-4 gap-2;
+
+      & .body__internal-link-buttons__button {
+        @apply w-full flex justify-center items-center gap-2 hover:bg-gray-100;
+        @apply border-gray-200 border-2 rounded;
+      }
 
-    & .bottom__button,
-    & :deep(button.bottom__button) {
-      @apply w-full flex flex-row place-content-center gap-2 hover:bg-gray-100;
-      @apply md:mr-1 md:my-1 md:p-1;
-      @apply border-gray-200 border-2 rounded;
+      & :deep(.body__internal-link-buttons__button) {
+        @apply w-full hover:bg-gray-100;
+        @apply border-gray-200 border-2 rounded;
+      }
     }
   }
 }
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index afa7c12b..76ced1ae 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -11,30 +11,42 @@ provide('state', sharedState)
 function toggle() {
   sharedState.active.value = !sharedState.active.value
 }
+
+interface Props {
+  className?: string
+}
+
+defineProps<Props>()
 </script>
 
 <template>
   <!-- TODO: Come up with a good way to set active bg colour -->
-  <BaseButton v-bind="$attrs" @click="toggle">
-    <div class="container">
-      More
-      <img
-        src="/icons/arrows/down.svg"
-        alt="Dropdown arrow"
-        width="10"
-        :class="sharedState.active.value && 'selected'"
-      />
-    </div>
-  </BaseButton>
-  <slot />
+  <div class="container">
+    <BaseButton :class="className" @click="toggle">
+      <div class="container__toggler">
+        More
+        <img
+          src="/icons/arrows/down.svg"
+          alt="Dropdown arrow"
+          width="10"
+          :class="sharedState.active.value && 'selected'"
+        />
+      </div>
+    </BaseButton>
+    <slot />
+  </div>
 </template>
 
 <style lang="postcss" scoped>
 .container {
-  @apply flex flex-row justify-center items-center gap-2;
+  @apply flex flex-col;
+
+  & .container__toggler {
+    @apply flex justify-center items-center gap-2;
 
-  & img.selected {
-    @apply rotate-180;
+    & img.selected {
+      @apply rotate-180;
+    }
   }
 }
 </style>
diff --git a/components/elements/buttons/DropDown/DropDownContent.vue b/components/elements/buttons/DropDown/DropDownContent.vue
index 6e86b573..d2afe285 100644
--- a/components/elements/buttons/DropDown/DropDownContent.vue
+++ b/components/elements/buttons/DropDown/DropDownContent.vue
@@ -12,7 +12,6 @@ const sharedState: SharedState = inject('state', { active: ref(false) })
 
 <style lang="postcss" scoped>
 .drop-down-content__container {
-  @apply flex flex-col;
-  @apply border border-gray-200 border-t-0;
+  @apply border border-gray-200 rounded;
 }
 </style>
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 18def28c..930a332c 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -8,9 +8,9 @@
 
 <style lang="postcss" scoped>
 .container {
-  @apply py-2 text-center hover:bg-gray-100;
+  @apply py-2 text-center border-b border-gray-200 hover:bg-gray-100;
 }
-.container:not(:last-child) {
-  @apply border-gray-200 border-b;
+.container:last-child {
+  @apply border-b-0;
 }
 </style>
diff --git a/components/elements/buttons/SocialButtons/SocialButtons.vue b/components/elements/buttons/SocialButtons/SocialButtons.vue
index bb249d54..7eba33f4 100644
--- a/components/elements/buttons/SocialButtons/SocialButtons.vue
+++ b/components/elements/buttons/SocialButtons/SocialButtons.vue
@@ -22,21 +22,15 @@ defineProps<NavLinksProps>()
 
 <style lang="postcss" scoped>
 .social-buttons {
-  @apply my-1;
-  @apply grid auto-cols-fr grid-cols-4 gap-3;
-  @apply md:ml-5 md:mt-5;
+  @apply w-full grid auto-cols-fr grid-cols-4 gap-2;
 }
 
-@media (max-width: 767px) {
-  .social-button {
-    @apply flex content-center items-center justify-center justify-items-center;
-    @apply rounded bg-gray-100;
-    @apply p-2;
-  }
-  .social-button img {
-    @apply max-w-[30%];
-  }
+.social-button {
+  @apply flex content-center items-center justify-center;
+  @apply rounded bg-gray-100;
+  @apply p-2;
 }
+
 .social-button img {
   @apply w-5;
 }

From 3c84af49c947c9d96e122fb96798bc67e10deda2 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 21 Apr 2024 21:56:46 +0800
Subject: [PATCH 15/25] Add event handling for DropDownItem

---
 .../buttons/DropDown/DropDownItem.vue         | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 930a332c..04cca807 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,7 +1,20 @@
-<script setup lang="ts" />
+<script setup lang="ts">
+import type { SharedState } from './DropDown.vue'
+
+const sharedState: SharedState = inject('state', { active: ref(false) })
+
+const emit = defineEmits<{
+  (event: 'click'): void
+}>()
+
+function toggle() {
+  sharedState.active.value = false
+  emit('click')
+}
+</script>
 
 <template>
-  <button class="container">
+  <button class="container" @click="toggle">
     <slot />
   </button>
 </template>
@@ -9,8 +22,9 @@
 <style lang="postcss" scoped>
 .container {
   @apply py-2 text-center border-b border-gray-200 hover:bg-gray-100;
-}
-.container:last-child {
-  @apply border-b-0;
+
+  &:last-child {
+    @apply border-b-0;
+  }
 }
 </style>

From 8a8aa00b4f330f17ddd5c47e1eb22ab178fec543 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Thu, 2 May 2024 22:00:18 +0800
Subject: [PATCH 16/25] Rework component tree

---
 .../LeaderboardInfo/Desktop/Desktop.vue       |  9 +++----
 .../buttons/DropDown/DropDown.test.ts         | 17 +++++++++---
 .../elements/buttons/DropDown/DropDown.vue    | 26 ++++++++++++++-----
 .../buttons/DropDown/DropDownContent.vue      | 17 ------------
 .../buttons/DropDown/DropDownItem.vue         | 13 ++++++----
 5 files changed, 45 insertions(+), 37 deletions(-)
 delete mode 100644 components/elements/buttons/DropDown/DropDownContent.vue

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index ef427847..073474ec 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
 import DropDown from 'elements/buttons/DropDown/DropDown.vue'
-import DropDownContent from 'elements/buttons/DropDown/DropDownContent.vue'
 import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
 import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
 import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
@@ -70,11 +69,9 @@ defineProps<Props>()
           <div>Resources</div>
         </ButtonLink>
         <DropDown class-name="body__internal-link-buttons__button">
-          <DropDownContent>
-            <DropDownItem>First</DropDownItem>
-            <DropDownItem>Second</DropDownItem>
-            <DropDownItem>Third</DropDownItem>
-          </DropDownContent>
+          <DropDownItem>First</DropDownItem>
+          <DropDownItem>Second</DropDownItem>
+          <DropDownItem>Third</DropDownItem>
         </DropDown>
       </div>
       <SocialButtons :socials="socials" />
diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index ef100bc3..0be2246c 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -1,9 +1,20 @@
-import { mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { getByTestId } from 'root/testUtils'
 import DropDown from './DropDown.vue'
+import type { ComponentMountingOptions } from '@vue/test-utils'
 
-describe.skip('<DropDown />', () => {
+enableAutoUnmount(afterEach)
+
+function mountDropDown(options?: ComponentMountingOptions<typeof DropDown>) {
+  return mount(DropDown, options)
+}
+
+describe('<DropDown />', () => {
   it('should render without crashing', () => {
-    const wrapper = mount(DropDown)
+    const wrapper = mountDropDown({
+      props: { className: 'test' },
+    })
     expect(wrapper.isVisible()).toBe(true)
+    expect(getByTestId(wrapper, 'toggler').classes()).toContain('test')
   })
 })
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index 76ced1ae..ead8d30b 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+// Explicitly-importing these because tests don't like the auto-imports - zysim
+import { provide, ref } from 'vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
 
 export interface SharedState {
   active: Ref<boolean>
 }
 
-const sharedState: SharedState = { active: ref(false) }
-provide('state', sharedState)
+const state: SharedState = { active: ref(false) }
+
+provide('state', state)
 
 function toggle() {
-  sharedState.active.value = !sharedState.active.value
+  state.active.value = !state.active.value
 }
 
 interface Props {
@@ -22,18 +25,29 @@ defineProps<Props>()
 <template>
   <!-- TODO: Come up with a good way to set active bg colour -->
   <div class="container">
-    <BaseButton :class="className" @click="toggle">
+    <BaseButton
+      data-testid="toggler"
+      :class="[className, 'container__button']"
+      @click="toggle"
+    >
       <div class="container__toggler">
         More
         <img
           src="/icons/arrows/down.svg"
           alt="Dropdown arrow"
           width="10"
-          :class="sharedState.active.value && 'selected'"
+          data-testid="arrow"
+          :class="state.active.value && 'selected'"
         />
       </div>
     </BaseButton>
-    <slot />
+    <div
+      v-if="state.active.value"
+      data-testid="dropdown-content"
+      class="container__content"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
diff --git a/components/elements/buttons/DropDown/DropDownContent.vue b/components/elements/buttons/DropDown/DropDownContent.vue
deleted file mode 100644
index d2afe285..00000000
--- a/components/elements/buttons/DropDown/DropDownContent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import type { SharedState } from './DropDown.vue'
-const sharedState: SharedState = inject('state', { active: ref(false) })
-</script>
-
-<template>
-  <div v-if="sharedState.active.value" class="drop-down-content__container">
-    <slot />
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.drop-down-content__container {
-  @apply border border-gray-200 rounded;
-}
-</style>
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 04cca807..19e37058 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import type { SharedState } from './DropDown.vue'
 
-const sharedState: SharedState = inject('state', { active: ref(false) })
-
 const emit = defineEmits<{
   (event: 'click'): void
 }>()
 
-function toggle() {
-  sharedState.active.value = false
+const state: SharedState = inject('state', { active: ref(false) })
+
+function hide() {
+  state.active.value = false
   emit('click')
 }
 </script>
 
 <template>
-  <button class="container" @click="toggle">
+  <button
+    :class="['container', state.active.value && 'selected']"
+    @click="hide"
+  >
     <slot />
   </button>
 </template>

From f50ded04043738705d798321c7042c8e47a28886 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Thu, 2 May 2024 22:02:02 +0800
Subject: [PATCH 17/25] Apply roundabout way to get dropdown borders to work

---
 components/blocks/LeaderboardInfo/Desktop/Desktop.vue | 4 ++--
 components/elements/buttons/DropDown/DropDown.vue     | 8 ++++++++
 components/elements/buttons/DropDown/DropDownItem.vue | 7 ++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index 073474ec..ce279a06 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -119,12 +119,12 @@ defineProps<Props>()
       @apply w-full flex flex-col mb-4 gap-2;
 
       & .body__internal-link-buttons__button {
-        @apply w-full flex justify-center items-center gap-2 hover:bg-gray-100;
+        @apply w-full flex justify-center items-center gap-2 bg-white hover:bg-gray-100;
         @apply border-gray-200 border-2 rounded;
       }
 
       & :deep(.body__internal-link-buttons__button) {
-        @apply w-full hover:bg-gray-100;
+        @apply w-full bg-white hover:bg-gray-100;
         @apply border-gray-200 border-2 rounded;
       }
     }
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index ead8d30b..0757fc9a 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -55,6 +55,10 @@ defineProps<Props>()
 .container {
   @apply flex flex-col;
 
+  & .container__button {
+    @apply relative z-10;
+  }
+
   & .container__toggler {
     @apply flex justify-center items-center gap-2;
 
@@ -62,5 +66,9 @@ defineProps<Props>()
       @apply rotate-180;
     }
   }
+
+  & .container__content {
+    @apply -mt-1;
+  }
 }
 </style>
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 19e37058..056e29e3 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { inject, ref } from 'vue'
 import type { SharedState } from './DropDown.vue'
 
 const emit = defineEmits<{
@@ -24,10 +25,10 @@ function hide() {
 
 <style lang="postcss" scoped>
 .container {
-  @apply py-2 text-center border-b border-gray-200 hover:bg-gray-100;
+  @apply py-2 text-center border border-t-0 border-gray-200 hover:bg-gray-100;
 
-  &:last-child {
-    @apply border-b-0;
+  &.selected:first {
+    @apply pt-4;
   }
 }
 </style>

From c5e1fb6e856a8a095efe02e1429483e6963782ed Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 17:28:21 +0800
Subject: [PATCH 18/25] Add tests

---
 .../buttons/DropDown/DropDown.test.ts         | 25 ++++++++++++++++
 .../buttons/DropDown/DropDownItem.test.ts     | 29 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 components/elements/buttons/DropDown/DropDownItem.test.ts

diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index 0be2246c..796d8016 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -1,6 +1,7 @@
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
 import DropDown from './DropDown.vue'
+import DropDownItem from './DropDownItem.vue'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
@@ -17,4 +18,28 @@ describe('<DropDown />', () => {
     expect(wrapper.isVisible()).toBe(true)
     expect(getByTestId(wrapper, 'toggler').classes()).toContain('test')
   })
+
+  describe('when the toggler is clicked', () => {
+    it('should render the slot item, then hide it on a second click', async () => {
+      const itemWrapper = mount(DropDownItem)
+
+      const wrapper = mountDropDown({
+        slots: { default: itemWrapper.html() },
+      })
+
+      await getByTestId(wrapper, 'toggler').trigger('click')
+      expect(wrapper.html()).toContain(itemWrapper.html())
+
+      await getByTestId(wrapper, 'toggler').trigger('click')
+      expect(wrapper.html()).not.toContain(itemWrapper.html())
+    })
+
+    it('should apply the style to the dropdown arrow', async () => {
+      const wrapper = mountDropDown()
+
+      await getByTestId(wrapper, 'toggler').trigger('click')
+
+      expect(getByTestId(wrapper, 'arrow').classes()).toContain('selected')
+    })
+  })
 })
diff --git a/components/elements/buttons/DropDown/DropDownItem.test.ts b/components/elements/buttons/DropDown/DropDownItem.test.ts
new file mode 100644
index 00000000..cab5f377
--- /dev/null
+++ b/components/elements/buttons/DropDown/DropDownItem.test.ts
@@ -0,0 +1,29 @@
+import { enableAutoUnmount, shallowMount } from '@vue/test-utils'
+import { getByTestId } from 'root/testUtils'
+import DropDownItem from './DropDownItem.vue'
+import type { ComponentMountingOptions } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+
+function mountDropDownItem(
+  options?: ComponentMountingOptions<typeof DropDownItem>,
+) {
+  return shallowMount(DropDownItem, options)
+}
+
+describe('<DropDownItem />', () => {
+  it('should render without crashing', () => {
+    const wrapper = mountDropDownItem({
+      props: { slots: 'test' },
+    })
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it("should trigger the click event when it's, well, clicked on", async () => {
+    const wrapper = mountDropDownItem({})
+
+    await getByTestId(wrapper, 'container').trigger('click')
+
+    expect(wrapper.emitted().click).toBeTruthy()
+  })
+})

From bf0e0fd655a7615f1eec4d5d596d99d8b4a86eaf Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 18:38:53 +0800
Subject: [PATCH 19/25] Remove unnecessary state check in DropDownItem

---
 components/elements/buttons/DropDown/DropDownItem.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 056e29e3..5c82c9c6 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -15,10 +15,7 @@ function hide() {
 </script>
 
 <template>
-  <button
-    :class="['container', state.active.value && 'selected']"
-    @click="hide"
-  >
+  <button class="container" data-testid="container" @click="hide">
     <slot />
   </button>
 </template>
@@ -27,7 +24,7 @@ function hide() {
 .container {
   @apply py-2 text-center border border-t-0 border-gray-200 hover:bg-gray-100;
 
-  &.selected:first {
+  &:first {
     @apply pt-4;
   }
 }

From e7fdb2a1c14f576e352de62320abd562ff3ed8d7 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 18:41:22 +0800
Subject: [PATCH 20/25] Change class name

---
 components/elements/buttons/DropDown/DropDown.test.ts | 2 +-
 components/elements/buttons/DropDown/DropDown.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index 796d8016..032ac9df 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -39,7 +39,7 @@ describe('<DropDown />', () => {
 
       await getByTestId(wrapper, 'toggler').trigger('click')
 
-      expect(getByTestId(wrapper, 'arrow').classes()).toContain('selected')
+      expect(getByTestId(wrapper, 'arrow').classes()).toContain('isOpen')
     })
   })
 })
diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index 0757fc9a..8942a420 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -37,7 +37,7 @@ defineProps<Props>()
           alt="Dropdown arrow"
           width="10"
           data-testid="arrow"
-          :class="state.active.value && 'selected'"
+          :class="state.active.value && 'isOpen'"
         />
       </div>
     </BaseButton>
@@ -62,7 +62,7 @@ defineProps<Props>()
   & .container__toggler {
     @apply flex justify-center items-center gap-2;
 
-    & img.selected {
+    & img.isOpen {
       @apply rotate-180;
     }
   }

From accd1db7b778491d98d652f25413a73ba97dece9 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 19:01:37 +0800
Subject: [PATCH 21/25] Rename files and fix first Item padding

---
 .../blocks/LeaderboardInfo/Desktop/Desktop.vue | 15 ++++++++-------
 .../elements/buttons/DropDown/DropDown.test.ts | 18 +++++++++---------
 .../buttons/DropDown/DropDownItem.test.ts      |  8 ++++----
 .../elements/buttons/DropDown/DropDownItem.vue |  6 +++---
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index ce279a06..64c3335b 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import DropDown from 'elements/buttons/DropDown/DropDown.vue'
-import DropDownItem from 'elements/buttons/DropDown/DropDownItem.vue'
+import Dropdown from 'elements/buttons/Dropdown/Dropdown.vue'
+import DropdownItem from 'elements/buttons/Dropdown/DropdownItem.vue'
 import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
 import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
 import Tag from 'elements/tags/Tag/Tag.vue'
@@ -68,11 +68,11 @@ defineProps<Props>()
           <i-svg-link />
           <div>Resources</div>
         </ButtonLink>
-        <DropDown class-name="body__internal-link-buttons__button">
-          <DropDownItem>First</DropDownItem>
-          <DropDownItem>Second</DropDownItem>
-          <DropDownItem>Third</DropDownItem>
-        </DropDown>
+        <Dropdown class-name="body__internal-link-buttons__button">
+          <DropdownItem>First</DropdownItem>
+          <DropdownItem>Second</DropdownItem>
+          <DropdownItem>Third</DropdownItem>
+        </Dropdown>
       </div>
       <SocialButtons :socials="socials" />
     </div>
@@ -131,3 +131,4 @@ defineProps<Props>()
   }
 }
 </style>
+elements/buttons/Dropdown/Dropdown.vueelements/buttons/Dropdown/DropdownItem.vue
diff --git a/components/elements/buttons/DropDown/DropDown.test.ts b/components/elements/buttons/DropDown/DropDown.test.ts
index 032ac9df..2f633cdd 100644
--- a/components/elements/buttons/DropDown/DropDown.test.ts
+++ b/components/elements/buttons/DropDown/DropDown.test.ts
@@ -1,18 +1,18 @@
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
-import DropDown from './DropDown.vue'
-import DropDownItem from './DropDownItem.vue'
+import Dropdown from './Dropdown.vue'
+import DropdownItem from './DropdownItem.vue'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
 
-function mountDropDown(options?: ComponentMountingOptions<typeof DropDown>) {
-  return mount(DropDown, options)
+function mountDropdown(options?: ComponentMountingOptions<typeof Dropdown>) {
+  return mount(Dropdown, options)
 }
 
-describe('<DropDown />', () => {
+describe('<Dropdown />', () => {
   it('should render without crashing', () => {
-    const wrapper = mountDropDown({
+    const wrapper = mountDropdown({
       props: { className: 'test' },
     })
     expect(wrapper.isVisible()).toBe(true)
@@ -21,9 +21,9 @@ describe('<DropDown />', () => {
 
   describe('when the toggler is clicked', () => {
     it('should render the slot item, then hide it on a second click', async () => {
-      const itemWrapper = mount(DropDownItem)
+      const itemWrapper = mount(DropdownItem)
 
-      const wrapper = mountDropDown({
+      const wrapper = mountDropdown({
         slots: { default: itemWrapper.html() },
       })
 
@@ -35,7 +35,7 @@ describe('<DropDown />', () => {
     })
 
     it('should apply the style to the dropdown arrow', async () => {
-      const wrapper = mountDropDown()
+      const wrapper = mountDropdown()
 
       await getByTestId(wrapper, 'toggler').trigger('click')
 
diff --git a/components/elements/buttons/DropDown/DropDownItem.test.ts b/components/elements/buttons/DropDown/DropDownItem.test.ts
index cab5f377..f4736313 100644
--- a/components/elements/buttons/DropDown/DropDownItem.test.ts
+++ b/components/elements/buttons/DropDown/DropDownItem.test.ts
@@ -1,17 +1,17 @@
 import { enableAutoUnmount, shallowMount } from '@vue/test-utils'
 import { getByTestId } from 'root/testUtils'
-import DropDownItem from './DropDownItem.vue'
+import DropdownItem from './DropdownItem.vue'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
 
 function mountDropDownItem(
-  options?: ComponentMountingOptions<typeof DropDownItem>,
+  options?: ComponentMountingOptions<typeof DropdownItem>,
 ) {
-  return shallowMount(DropDownItem, options)
+  return shallowMount(DropdownItem, options)
 }
 
-describe('<DropDownItem />', () => {
+describe('<DropdownItem />', () => {
   it('should render without crashing', () => {
     const wrapper = mountDropDownItem({
       props: { slots: 'test' },
diff --git a/components/elements/buttons/DropDown/DropDownItem.vue b/components/elements/buttons/DropDown/DropDownItem.vue
index 5c82c9c6..247ec19a 100644
--- a/components/elements/buttons/DropDown/DropDownItem.vue
+++ b/components/elements/buttons/DropDown/DropDownItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, ref } from 'vue'
-import type { SharedState } from './DropDown.vue'
+import type { SharedState } from './Dropdown.vue'
 
 const emit = defineEmits<{
   (event: 'click'): void
@@ -24,8 +24,8 @@ function hide() {
 .container {
   @apply py-2 text-center border border-t-0 border-gray-200 hover:bg-gray-100;
 
-  &:first {
-    @apply pt-4;
+  &:first-child {
+    @apply pt-3;
   }
 }
 </style>

From 1089dbe0bf186648756b709c75257a8c5602f209 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 19:07:47 +0800
Subject: [PATCH 22/25] Fix... lint errors?

---
 components/blocks/LeaderboardInfo/Desktop/Desktop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index 64c3335b..d61b66f3 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
 import Dropdown from 'elements/buttons/Dropdown/Dropdown.vue'
 import DropdownItem from 'elements/buttons/Dropdown/DropdownItem.vue'
+import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
 import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
 import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
 import Tag from 'elements/tags/Tag/Tag.vue'

From 9971aff035f9e06255e37ffe7c7cec8fdb15df14 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 19:11:44 +0800
Subject: [PATCH 23/25] Add type import

---
 components/elements/buttons/DropDown/DropDown.vue         | 1 +
 components/elements/buttons/DropDown/DropDownItem.test.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/elements/buttons/DropDown/DropDown.vue b/components/elements/buttons/DropDown/DropDown.vue
index 8942a420..f416ceaa 100644
--- a/components/elements/buttons/DropDown/DropDown.vue
+++ b/components/elements/buttons/DropDown/DropDown.vue
@@ -2,6 +2,7 @@
 // Explicitly-importing these because tests don't like the auto-imports - zysim
 import { provide, ref } from 'vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
+import type { Ref } from 'vue'
 
 export interface SharedState {
   active: Ref<boolean>
diff --git a/components/elements/buttons/DropDown/DropDownItem.test.ts b/components/elements/buttons/DropDown/DropDownItem.test.ts
index f4736313..2092e148 100644
--- a/components/elements/buttons/DropDown/DropDownItem.test.ts
+++ b/components/elements/buttons/DropDown/DropDownItem.test.ts
@@ -5,7 +5,7 @@ import type { ComponentMountingOptions } from '@vue/test-utils'
 
 enableAutoUnmount(afterEach)
 
-function mountDropDownItem(
+function mountDropdownItem(
   options?: ComponentMountingOptions<typeof DropdownItem>,
 ) {
   return shallowMount(DropdownItem, options)
@@ -13,14 +13,14 @@ function mountDropDownItem(
 
 describe('<DropdownItem />', () => {
   it('should render without crashing', () => {
-    const wrapper = mountDropDownItem({
+    const wrapper = mountDropdownItem({
       props: { slots: 'test' },
     })
     expect(wrapper.isVisible()).toBe(true)
   })
 
   it("should trigger the click event when it's, well, clicked on", async () => {
-    const wrapper = mountDropDownItem({})
+    const wrapper = mountDropdownItem({})
 
     await getByTestId(wrapper, 'container').trigger('click')
 

From c78305126ac0c7dd0263681d9b27bd28226bcf60 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 23:05:05 +0800
Subject: [PATCH 24/25] Replace prop with event emit

---
 .../blocks/LeaderboardInfo/Desktop/Desktop.vue     |  7 +++++--
 .../blocks/LeaderboardInfo/LeaderboardInfo.vue     |  6 ++++--
 .../blocks/LeaderboardInfo/Mobile/Mobile.vue       |  7 +++++--
 .../elements/buttons/FollowButton/FollowButton.vue | 14 +++++---------
 pages/board/[slug].vue                             |  1 +
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index d61b66f3..ec989ea2 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -10,9 +10,12 @@ import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
 
 interface Props extends LeaderboardInfoProps {
   todoPlatforms: string[]
-  onClick: () => void
 }
 
+const emit = defineEmits<{
+  (event: 'follow'): void
+}>()
+
 // TODO: Get actual links tied to the leaderboard
 const socials: Socials[] = [
   {
@@ -56,7 +59,7 @@ defineProps<Props>()
       <FollowButton
         class="body__follow"
         data-testid="body__follow"
-        :on-click="onClick"
+        @follow="emit('follow')"
       />
       <div class="body__divider" />
       <div class="body__internal-link-buttons">
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index da12a37b..a32058df 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -27,15 +27,17 @@ defineProps<LeaderboardInfoProps>()
 <template>
   <Desktop
     v-if="!isMobile"
+    data-testid="child"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
-    :on-click="() => emit('follow', leaderboard.id)"
+    @follow="emit('follow', leaderboard.id)"
   />
   <Mobile
     v-if="isMobile"
+    data-testid="child"
     :leaderboard="leaderboard"
     :todo-platforms="todoPlatforms"
-    :on-click="() => emit('follow', leaderboard.id)"
+    @follow="emit('follow', leaderboard.id)"
   />
 </template>
 
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
index 3b81425c..311419ef 100644
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
+++ b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
@@ -7,9 +7,12 @@ import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
 
 interface Props extends LeaderboardInfoProps {
   todoPlatforms: string[]
-  onClick: () => void
 }
 
+const emit = defineEmits<{
+  (event: 'follow'): void
+}>()
+
 defineProps<Props>()
 </script>
 
@@ -22,7 +25,7 @@ defineProps<Props>()
         <FollowButton
           class="top__button top__button__follow"
           data-testid="top__button__follow"
-          :on-click="onClick"
+          @follow="emit('follow')"
         />
         <ButtonLink
           class="top__button top__button__submit"
diff --git a/components/elements/buttons/FollowButton/FollowButton.vue b/components/elements/buttons/FollowButton/FollowButton.vue
index eed25169..9bfda74f 100644
--- a/components/elements/buttons/FollowButton/FollowButton.vue
+++ b/components/elements/buttons/FollowButton/FollowButton.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-interface FollowButtonProps {
-  onClick: () => void
-}
-
-withDefaults(defineProps<FollowButtonProps>(), {
-  onClick: () => 2,
-})
+const emit = defineEmits<{
+  (event: 'follow'): void
+}>()
 </script>
 
 <template>
   <button
     class="follow-button"
     v-bind="$attrs"
-    @click="onClick"
-    @keyup.enter="onClick"
+    @click="emit('follow')"
+    @keyup.enter="emit('follow')"
   >
     Follow
   </button>
diff --git a/pages/board/[slug].vue b/pages/board/[slug].vue
index 0a6bc81d..f6c2a2e1 100644
--- a/pages/board/[slug].vue
+++ b/pages/board/[slug].vue
@@ -14,6 +14,7 @@ const leaderboardDetail = await useGetLeaderboardDetail(leaderboardSlug)
     <LeaderboardInfo
       v-if="!leaderboardDetail.loading && leaderboardDetail.data != null"
       :leaderboard="leaderboardDetail.data!"
+      @follow="(id) => console.log(id)"
     />
   </div>
 </template>

From 55121b12c2722985e937c11acc1cd782cd5df496 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sun, 5 May 2024 23:45:56 +0800
Subject: [PATCH 25/25] Added tests in components I forgot about lol

---
 .../LeaderboardInfo/Desktop/Desktop.test.ts   | 36 +++++++++++++++++++
 .../LeaderboardInfo/Desktop/Desktop.vue       |  8 +++--
 .../LeaderboardInfo/LeaderboardInfo.test.ts   | 23 ++++++++----
 .../LeaderboardInfo/Mobile/Mobile.test.ts     | 36 +++++++++++++++++++
 .../blocks/LeaderboardInfo/Mobile/Mobile.vue  |  8 +++--
 .../PlatformTags/PlatformTags.test.ts         | 11 +++++-
 6 files changed, 111 insertions(+), 11 deletions(-)
 create mode 100644 components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
 create mode 100644 components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts

diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts b/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
new file mode 100644
index 00000000..b041c42f
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
@@ -0,0 +1,36 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { vi } from 'vitest'
+import { getByTestId } from 'root/testUtils'
+import Desktop from './Desktop.vue'
+
+describe('<Desktop />', () => {
+  function getDesktopWrapper() {
+    return mount(Desktop, {
+      props: {
+        leaderboard: {
+          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
+          id: 1,
+          name: 'Stuck in the Train Simulator 2',
+          slug: 'stuck-in-the-train-sim-2',
+        },
+        todoPlatforms: ['XBox', 'PC'],
+      },
+    })
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  enableAutoUnmount(afterEach)
+
+  it('should render without crashing', () => {
+    const wrapper = getDesktopWrapper()
+    expect(wrapper.isVisible()).toBe(true)
+
+    expect(getByTestId(wrapper, 'title').text()).toBe(
+      'Stuck in the Train Simulator 2',
+    )
+    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
+  })
+})
diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
index ec989ea2..dae18f2d 100644
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
@@ -46,14 +46,18 @@ defineProps<Props>()
 <template>
   <div class="leaderboard-info">
     <!-- TODO: Do not provide defaults and instead return nothing if on production -->
-    <div class="title">{{ leaderboard.name || 'Game Name' }}</div>
+    <div class="title" data-testid="title">
+      {{ leaderboard.name || 'Game Name' }}
+    </div>
     <div class="body">
       <img
         src="https://via.placeholder.com/220x220"
         alt="game-art"
         class="body__game-art"
       />
-      <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
+      <Tag data-testid="tag">{{
+        leaderboard.categories[0]?.name ?? 'TODO'
+      }}</Tag>
       <span class="body__published-year">YEAR</span>
       <PlatformTags :tags="todoPlatforms" />
       <FollowButton
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
index ca086447..10549dcf 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
@@ -1,8 +1,9 @@
 import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { vi } from 'vitest'
 import { getByTestId } from 'root/testUtils'
 import LeaderboardInfo from './LeaderboardInfo.vue'
 
-describe.skip('<LeaderboardInfo />', () => {
+describe('<LeaderboardInfo />', () => {
   function getLeaderboardInfoWrapper() {
     return mount(LeaderboardInfo, {
       props: {
@@ -35,6 +36,7 @@ describe.skip('<LeaderboardInfo />', () => {
 
   afterEach(() => {
     vi.restoreAllMocks()
+    vi.unstubAllGlobals()
   })
 
   enableAutoUnmount(afterEach)
@@ -44,13 +46,22 @@ describe.skip('<LeaderboardInfo />', () => {
     expect(wrapper.isVisible()).toBe(true)
   })
 
-  it('should trigger follow button', async () => {
+  it('should render <Desktop /> if device width is large', () => {
+    vi.stubGlobal('innerWidth', 1980)
     const wrapper = getLeaderboardInfoWrapper()
-    await getByTestId(wrapper, 'middle__follow').trigger('click')
-    expect(wrapper.emitted().follow?.[0]).toEqual([1])
+    expect(wrapper.html()).toContain('Guides')
   })
 
-  it('should trigger', () => {
-    //
+  it('should render <Mobile /> if device width is small', () => {
+    vi.stubGlobal('innerWidth', 600)
+    const wrapper = getLeaderboardInfoWrapper()
+    expect(wrapper.html()).toContain('Submit Run')
+  })
+
+  // TODO: The follow event doesn't trigger in the test, somehow
+  it.skip('should emit event when the Follow Button is triggered', async () => {
+    const wrapper = getLeaderboardInfoWrapper()
+    await getByTestId(wrapper, 'child').trigger('follow')
+    expect(wrapper.emitted().follow).toBeTruthy()
   })
 })
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts b/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
new file mode 100644
index 00000000..045248ff
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
@@ -0,0 +1,36 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { vi } from 'vitest'
+import { getByTestId } from 'root/testUtils'
+import Mobile from './Mobile.vue'
+
+describe('<Mobile />', () => {
+  function getMobileWrapper() {
+    return mount(Mobile, {
+      props: {
+        leaderboard: {
+          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
+          id: 1,
+          name: 'Stuck in the Train Simulator 2',
+          slug: 'stuck-in-the-train-sim-2',
+        },
+        todoPlatforms: ['XBox', 'PC'],
+      },
+    })
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  enableAutoUnmount(afterEach)
+
+  it('should render without crashing', () => {
+    const wrapper = getMobileWrapper()
+    expect(wrapper.isVisible()).toBe(true)
+
+    expect(getByTestId(wrapper, 'title').text()).toBe(
+      'Stuck in the Train Simulator 2',
+    )
+    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
+  })
+})
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
index 311419ef..99c16642 100644
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
+++ b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
@@ -20,7 +20,9 @@ defineProps<Props>()
   <div class="leaderboard-info">
     <!-- TODO: Do not provide defaults and instead return nothing if on production -->
     <div class="top">
-      <div class="top__title">{{ leaderboard.name || 'Game Name' }}</div>
+      <div class="top__title" data-testid="title">
+        {{ leaderboard.name || 'Game Name' }}
+      </div>
       <div class="top__button-container">
         <FollowButton
           class="top__button top__button__follow"
@@ -38,7 +40,9 @@ defineProps<Props>()
     </div>
     <div class="bottom">
       <div class="bottom__category-year">
-        <Tag>{{ leaderboard.categories[0] ?? 'TODO' }}</Tag>
+        <Tag data-testid="tag">{{
+          leaderboard.categories[0]?.name ?? 'TODO'
+        }}</Tag>
         <span class="bottom__published-year">YEAR</span>
       </div>
       <PlatformTags :tags="todoPlatforms" />
diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
index c0f2a13a..2ff7c8f8 100644
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
+++ b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
@@ -2,13 +2,22 @@ import { mount } from '@vue/test-utils'
 import PlatformTags from './PlatformTags.vue'
 
 describe('<PlatformTags />', () => {
+  const tags = ['XBox', 'PS4', 'Amiga DS']
+
   it('should render without crashing', () => {
     const wrapper = mount(PlatformTags, {
       props: {
-        tags: ['XBox', 'PS4', 'Amiga DS'],
+        tags,
       },
     })
 
     expect(wrapper.isVisible()).toBe(true)
+
+    wrapper
+      .getComponent('div.platform-tags')
+      .findAllComponents('div')
+      .forEach((c, i) => {
+        expect(c.text()).toBe(tags[i])
+      })
   })
 })