From e82f8ea50d57b7ecedd3f29217689beeac4e16aa Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Mon, 3 Oct 2022 22:51:47 +0100
Subject: [PATCH] move info card into own component

---
 .../{InfoCardBase.vue => InfoCard.vue}        | 14 ++++++++--
 src/components/InfoCardExpansions.vue         | 28 -------------------
 src/pages/AnnoBase.vue                        | 10 +++++--
 src/pages/AnnoExpansions.vue                  |  7 +++--
 src/pages/data/info-card.ts                   |  2 +-
 5 files changed, 25 insertions(+), 36 deletions(-)
 rename src/components/{InfoCardBase.vue => InfoCard.vue} (65%)
 delete mode 100644 src/components/InfoCardExpansions.vue

diff --git a/src/components/InfoCardBase.vue b/src/components/InfoCard.vue
similarity index 65%
rename from src/components/InfoCardBase.vue
rename to src/components/InfoCard.vue
index 6fda4e9..6516fa5 100644
--- a/src/components/InfoCardBase.vue
+++ b/src/components/InfoCard.vue
@@ -1,12 +1,12 @@
 <template>
   <q-list separator class="big-font text-left">
     <InfoCardItemWorld
-      v-for="item in worldItemData"
+      v-for="item in itemWorldData"
       :key="item.icon"
       v-bind="item"
     ></InfoCardItemWorld>
     <InfoCardItem
-      v-for="item in itemDataBase"
+      v-for="item in itemData"
       :key="item.icon"
       v-bind="item"
     ></InfoCardItem>
@@ -16,7 +16,15 @@
 <script setup lang="ts">
 import InfoCardItem from './InfoCard/InfoCardItem.vue';
 import InfoCardItemWorld from './InfoCard/InfoCardItemWorld.vue';
-import { itemDataBase, worldItemData } from 'src/pages/data/info-card';
+import {
+  InfoCardItem as InfoCardItemModel,
+  InfoCardWorldItem as InfoCardWorldItemModel
+} from 'pages/data/models';
+
+defineProps<{
+  itemData?: InfoCardItemModel[];
+  itemWorldData?: InfoCardWorldItemModel[];
+}>();
 </script>
 
 <style lang="scss">
diff --git a/src/components/InfoCardExpansions.vue b/src/components/InfoCardExpansions.vue
deleted file mode 100644
index e6cb7f1..0000000
--- a/src/components/InfoCardExpansions.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <q-list separator class="big-font text-left">
-    <InfoCardItem
-      v-for="item in itemDataExpansions"
-      :key="item.id"
-      v-bind="item"
-    ></InfoCardItem>
-  </q-list>
-</template>
-
-<script setup lang="ts">
-import InfoCardItem from './InfoCard/InfoCardItem.vue';
-import { itemDataExpansions } from 'src/pages/data/info-card';
-</script>
-
-<style lang="scss">
-.big-font {
-  font-size: 2rem;
-}
-
-.info-icon {
-  width: 100px;
-}
-
-.info-small-icon {
-  width: 50px;
-}
-</style>
diff --git a/src/pages/AnnoBase.vue b/src/pages/AnnoBase.vue
index 0b2ecf3..b7ae63a 100644
--- a/src/pages/AnnoBase.vue
+++ b/src/pages/AnnoBase.vue
@@ -12,7 +12,10 @@
         :col-break="false"
         class="masonry-col item"
       >
-        <InfoCardBase></InfoCardBase>
+        <InfoCard
+          :item-data="itemDataBase"
+          :item-world-data="worldItemDataBase"
+        ></InfoCard>
       </ChainTiers>
       <ChainTiers
         v-for="tier in productionChainsBase"
@@ -39,13 +42,16 @@
 // Production Chain Data
 import { productionChainsBase } from './data/production-chains-base';
 
+// Info Card Data
+import { itemDataBase, worldItemDataBase } from 'src/pages/data/info-card';
+
 // Mermaid
 import { initialiseMermaid } from 'composables/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';
 import ProductionChain from 'components/ProductionChain.vue';
-import InfoCardBase from 'components/InfoCardBase.vue';
+import InfoCard from 'components/InfoCard.vue';
 
 initialiseMermaid();
 </script>
diff --git a/src/pages/AnnoExpansions.vue b/src/pages/AnnoExpansions.vue
index 8b3bb61..f4ee8b6 100644
--- a/src/pages/AnnoExpansions.vue
+++ b/src/pages/AnnoExpansions.vue
@@ -11,7 +11,7 @@
         class="masonry-col item"
         :col-break="false"
       >
-        <InfoCardExpansions></InfoCardExpansions>
+        <InfoCard :item-data="itemDataExpansions"></InfoCard>
       </ChainTiers>
       <ChainTiers
         v-for="tier in productionChainsExpansions"
@@ -38,13 +38,16 @@
 // Production Chain Data
 import { productionChainsExpansions } from './data/production-chains-expansions';
 
+// Info Card Data
+import { itemDataExpansions } from 'src/pages/data/info-card';
+
 // Mermaid
 import { initialiseMermaid } from 'composables/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';
 import ProductionChain from 'components/ProductionChain.vue';
-import InfoCardExpansions from 'components/InfoCardExpansions.vue';
+import InfoCard from 'components/InfoCard.vue';
 
 initialiseMermaid();
 </script>
diff --git a/src/pages/data/info-card.ts b/src/pages/data/info-card.ts
index 7672af8..b6a28b9 100644
--- a/src/pages/data/info-card.ts
+++ b/src/pages/data/info-card.ts
@@ -2,7 +2,7 @@ import * as icons from './icons';
 import fullChainMultiplierIcon from 'assets/productionChainMultiplier.svg';
 import { InfoCardItem, InfoCardWorldItem } from './models';
 
-export const worldItemData: InfoCardWorldItem[] = [
+export const worldItemDataBase: InfoCardWorldItem[] = [
   {
     id: 'furs',
     icon: icons.fursIcon,