platform fa icons

apps/frontend/src/components/PlatformBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="badgeClass">{{ platform }}</span>
+  <span :class="badgeClass"><i :class="iconClass"></i> {{ platform }}</span>
 </template>
 
 <script setup lang="ts">
@@ -9,10 +9,21 @@ const props = defineProps<{ platform: string }>()
 
 const knownPlatforms = ['tic80', 'ebitengine', 'love', 'godot']
 
-const badgeClass = computed(() => {
+const platformIcons: Record<string, string> = {
+  tic80: 'fa-solid fa-tv',
+  ebitengine: 'fa-brands fa-golang',
+  love: 'fa-solid fa-heart',
+  godot: 'fa-solid fa-robot',
+  other: 'fa-solid fa-cube',
+}
+
+const platformKey = computed(() => {
   const key = props.platform.toLowerCase().replace(/[^a-z0-9]/g, '')
-  return `platform-badge platform-${knownPlatforms.includes(key) ? key : 'other'}`
+  return knownPlatforms.includes(key) ? key : 'other'
 })
+
+const badgeClass = computed(() => `platform-badge platform-${platformKey.value}`)
+const iconClass = computed(() => platformIcons[platformKey.value])
 </script>
 
 <style scoped>