From 1eac1f759a2c6968e288ce94cd4b4ea94758385b Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Sun, 28 Nov 2021 02:49:24 -0800
Subject: [PATCH] Marathon location icon component

Related to Issue #44
---
 components/homepage/Marathons.vue |  3 +--
 components/marathon/Location.vue  | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 components/marathon/Location.vue

diff --git a/components/homepage/Marathons.vue b/components/homepage/Marathons.vue
index ea2228dd..e1d7fcdb 100644
--- 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
new file mode 100644
index 00000000..35a4fcbe
--- /dev/null
+++ 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>