Extract TopicList component

aeternity · Jun 14, 2021 · 6fa8ed7 · 6fa8ed7
1 parent 7609efb
commit 6fa8ed7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 30 deletions.
diff --git a/src/components/TopicList.vue b/src/components/TopicList.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="topic-list">
+    <div
+      v-for="[topic, data] in topics"
+      :key="topic"
+      class="not-bootstrap-row"
+    >
+      <Topic
+        class="text-ellipsis"
+        :topic="topic"
+      />
+      <AeAmountFiat :amount="data.amount_ae" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Topic from './tipRecords/Topic.vue';
+import AeAmountFiat from './AeAmountFiat.vue';
+
+export default {
+  components: { Topic, AeAmountFiat },
+  computed: mapState({
+    topics: ({ topics }) => topics.filter(([t]) => t !== '#test'),
+  }),
+};
+</script>
+
+<style lang="scss" scoped>
+.topic-list {
+  .not-bootstrap-row {
+    display: flex;
+    align-items: center;
+    margin: 0.5rem 0;
+
+    .topic {
+      flex-grow: 1;
+    }
+
+    .ae-amount-fiat {
+      flex-shrink: 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/layout/RightSectionTopics.vue b/src/components/layout/RightSectionTopics.vue
@@ -10,30 +10,19 @@
       {{ $t('components.layout.RightSection.Trending') }}
     </RightSectionTitle>
 
-    <div class="topic-list">
-      <div
-        v-for="[topic, data] in topics"
-        :key="topic"
-        class="not-bootstrap-row"
-      >
-        <Topic
-          class="text-ellipsis"
-          :topic="topic"
-        />
-        <AeAmountFiat :amount="data.amount_ae" />
-      </div>
-    </div>
+    <TopicList />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import RightSectionTitle from './RightSectionTitle.vue';
-import Topic from '../tipRecords/Topic.vue';
-import AeAmountFiat from '../AeAmountFiat.vue';
+import TopicList from '../TopicList.vue';
 
 export default {
-  components: { RightSectionTitle, Topic, AeAmountFiat },
+  components: {
+    RightSectionTitle, TopicList,
+  },
   props: { closed: Boolean },
   computed: mapState({
     topics: ({ topics }) => topics.filter(([t]) => t !== '#test'),
@@ -70,20 +59,6 @@ export default {
     @media (max-height: 900px) {
       max-height: 160px;
     }
-
-    .not-bootstrap-row {
-      display: flex;
-      align-items: center;
-      margin: 0.5rem 0;
-
-      .topic {
-        flex-grow: 1;
-      }
-
-      .ae-amount-fiat {
-        flex-shrink: 0;
-      }
-    }
   }
 }
 </style>