fix: moved icons and created PlatformClient so we can use the enum on the frontend

components/PlatformSelector.vue

@@ -74,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { IconsLinuxLogo, IconsWindowsLogo } from "#components";
 import {
   Listbox,
   ListboxButton,
@@ -83,19 +84,17 @@ import {
 } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import type { Component } from "vue";
-import LinuxLogo from "./icons/LinuxLogo.vue";
-import WindowsLogo from "./icons/WindowsLogo.vue";
 
 const model = defineModel<string>();
 
 const values: { [key: string]: { name: string; icon: Component } } = {
   Linux: {
     name: "Linux",
-    icon: LinuxLogo,
+    icon: IconsLinuxLogo,
   },
   Windows: {
     name: "Windows",
-    icon: WindowsLogo,
+    icon: IconsWindowsLogo,
   },
 };
 </script>

components/UserFooter.vue

@@ -63,8 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import GithubLogo from './icons/GithubLogo.vue';
-import DiscordLogo from './icons/DiscordLogo.vue';
+import { IconsDiscordLogo, IconsGithubLogo } from '#components';
 
 const navigation = {
     games: [
@@ -92,12 +91,12 @@ const navigation = {
         {
             name: 'GitHub',
             href: 'https://github.com/Drop-OSS',
-            icon: GithubLogo,
+            icon: IconsGithubLogo,
         },
         {
             name: "Discord",
             href: "https://discord.gg/NHx46XKJWA",
-            icon: DiscordLogo
+            icon: IconsDiscordLogo
         }
     ],
 }

composables/types.d.ts

@@ -1,13 +0,0 @@
-import type { Component } from "vue"
-
-export type NavigationItem = {
-    prefix: string,
-    route: string,
-    label: string,
-}
-
-export type QuickActionNav = {
-    icon: Component,
-    notifications?: Ref<number>,
-    action: () => Promise<void>,
-}

composables/types.ts

@@ -0,0 +1,18 @@
+import type { Component } from "vue";
+
+export type NavigationItem = {
+  prefix: string;
+  route: string;
+  label: string;
+};
+
+export type QuickActionNav = {
+  icon: Component;
+  notifications?: Ref<number>;
+  action: () => Promise<void>;
+};
+
+export enum PlatformClient {
+  Windows = "Windows",
+  Linux = "Linux",
+}

pages/admin/auth/index.vue

@@ -97,11 +97,11 @@
 </template>
 
 <script setup lang="ts">
+import { IconsSimpleAuthenticationLogo } from "#components";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { EllipsisHorizontalIcon } from "@heroicons/vue/20/solid";
 import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
-import SimpleAuthenticationLogo from "~/components/icons/SimpleAuthenticationLogo.vue";
 
 const authenticationMechanisms: Array<{
   name: string;
@@ -113,7 +113,7 @@ const authenticationMechanisms: Array<{
   {
     name: "Simple (username/password)",
     enabled: true,
-    icon: SimpleAuthenticationLogo,
+    icon: IconsSimpleAuthenticationLogo,
     route: "/admin/auth/simple",
   },
 ];

pages/store/[id]/index.vue

@@ -70,13 +70,10 @@
                 <td
                   class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                 >
-                  <IconsWindowsLogo
+                  <component
+                    v-for="platform in platforms"
+                    :is="icons[platform]"
                     class="text-blue-600 w-6 h-6"
-                    v-if="platforms.includes(Platform.Windows)"
-                  />
-                  <IconsLinuxLogo
-                    class="text-blue-600 w-6 h-6"
-                    v-if="platforms.includes(Platform.Linux)"
                   />
                   <span
                     v-if="platforms.length == 0"
@@ -162,12 +159,14 @@
 </template>
 
 <script setup lang="ts">
+import { IconsLinuxLogo, IconsWindowsLogo } from "#components";
 import { PlusIcon } from "@heroicons/vue/20/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
-import { Platform, type Game, type GameVersion } from "@prisma/client";
+import { type Game, type GameVersion } from "@prisma/client";
 import { micromark } from "micromark";
 import moment from "moment";
+import { PlatformClient } from "~/composables/types";
 
 const route = useRoute();
 const gameId = route.params.id.toString();
@@ -205,7 +204,7 @@ const descriptionHTML = micromark(game.mDescription);
 
 const showReadMore = previewHTML != descriptionHTML;
 const platforms = game.versions
-  .map((e) => e.platform)
+  .map((e) => e.platform as PlatformClient)
   .flat()
   .filter((e, i, u) => u.indexOf(e) === i);
 
@@ -213,6 +212,10 @@ const rating = Math.round(game.mReviewRating * 5);
 const ratingArray = Array(5)
   .fill(null)
   .map((_, i) => i + 1 <= rating);
+const icons = {
+  [PlatformClient.Linux]: IconsLinuxLogo,
+  [PlatformClient.Windows]: IconsWindowsLogo,
+};
 
 useHead({
   title: game.mName,