Marathon location icon component

Related to Issue #44
oengusio · Nov 28, 2021 · 1eac1f7 · 1eac1f7
1 parent 5223627
commit 1eac1f7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/components/homepage/Marathons.vue b/components/homepage/Marathons.vue
@@ -23,8 +23,7 @@
               </ElementLink>
             </ElementTableCell>
             <ElementTableCell :key="marathonsList.key + 'location' + index" class="location" :class="getRowParity(index)">
-              <span v-if="marathon.onsite && marathon.country" class="icon flag-icon" :class="`flag-icon-${marathon.country.toLowerCase()}`" />
-              <FontAwesomeIcon v-else :icon="[ 'fas', 'desktop' ]" class="icon" />
+              <MarathonLocation :marathon="marathon" />
             </ElementTableCell>
             <ElementTableCell :key="marathonsList.key + 'language' + index" class="language" :class="getRowParity(index)">
               {{ marathon.language.toLocaleUpperCase() }}

diff --git a/components/marathon/Location.vue b/components/marathon/Location.vue
@@ -0,0 +1,25 @@
+<template>
+  <span v-if="marathon.onsite && marathon.country" class="icon flag-icon" :class="`flag-icon-${marathon.country.toLowerCase()}`" />
+  <FontAwesomeIcon v-else :icon="[ 'fas', 'desktop' ]" class="icon" />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { FullMarathon, Marathon } from '~/types/api/marathon';
+
+export default Vue.extend({
+  props: {
+    marathon: {
+      type: Object as () => Marathon|FullMarathon,
+      default: undefined,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  display: flex;
+  justify-content: center;
+}
+</style>