From 8815cddebf4b81286364b0cccda823bdc8b436aa Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 15 Oct 2021 20:45:41 +0200
Subject: [PATCH] refactoring: split into CollectQuote

---
 client/src/components/CollectQuote.vue  | 62 +++++++++++++++++++++++++
 client/src/components/CollectQuotes.vue | 18 +------
 2 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/CollectQuote.vue

diff --git a/client/src/components/CollectQuote.vue b/client/src/components/CollectQuote.vue
new file mode 100644
index 0000000..de536fb
--- /dev/null
+++ b/client/src/components/CollectQuote.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="collect-quote__container">
+    <div class="collect-quote__quote">
+      {{ quote.quote }}
+      {{ quote.quote }}
+    </div>
+    <div class="collect-quote__actions">
+      <div class="collect-quote__icon collect-quote__icon-edit" @click="edit" />
+      <div class="collect-quote__icon collect-quote__icon-delete" @click="remove" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['quote'],
+  methods: {
+    edit() {
+      console.log('edit')
+    },
+    remove() {
+      console.log('remove')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.collect-quote {
+  &__container {
+    display: flex;
+  }
+  &__quote {
+    color: #ffffff;
+  }
+  &__actions {
+    display: flex;
+    margin: 0 32px;
+  }
+  &__icon {
+    width: 48px;
+    height: 48px;
+    margin-left: 16px;
+    border: 1px solid #ffffff;
+    border-radius: 8px;
+    text-align: center;
+    line-height: 48px;
+    font-size: 32px;
+    color: #ffffff;
+
+    &:hover {
+      background-color: #6040c0;
+    }
+
+    &-edit::after {
+      content: '✎';
+    }
+    &-delete::after {
+      content: '🗑';
+    }
+  }
+}
+</style>
diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index 38c87bf..4dc8d53 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -1,15 +1,7 @@
 <template>
-  <div class="collect-quotes">
+  <div>
     <CollectQuotesExplain />
-    <div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
-      <div class="collect-quotes__quote">
-        {{ quote.quote }}
-      </div>
-      <div class="collect-quotes__actions">
-        <div class="collect-quotes__icon collect-quotes__icon-edit" />
-        <div class="collect-quotes__icon collect-quotes__icon-delete" />
-      </div>
-    </div>
+    <CollectQuote v-for="quote in quotes" :key="quote.id" :quote="quote" />
   </div>
 </template>
 
@@ -26,9 +18,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.collect-quotes {
-  color: #ffc0c0;
-}
-</style>