move info card into own component

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">

src/components/InfoCardExpansions.vue

@@ -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>

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>

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>

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,