feat: add quote cards in collect mode

client/src/components/CollectQuotes.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="collect-quotes__container">
-    <h1>collect quotes</h1>
+    <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
-    <Quote v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
   </div>
 </template>
 
@@ -11,6 +10,22 @@ const quotes = [
     id: 1,
     quote: 'Somna imanus it vorgenstra exa al termanum.',
   },
+  {
+    id: 2,
+    quote: 'Kerbositus con vai quel verendenguum. Abtanosi con vai stice vermadostuos, na tum gehomo asbabasictnem orb eterum (phlegtum aka iborn).',
+  },
+  {
+    id: 3,
+    quote: 'blah! #1',
+  },
+  {
+    id: 4,
+    quote: 'blah! #2',
+  },
+  {
+    id: 5,
+    quote: 'blah! #3',
+  },
 ]
 </script>
 
@@ -18,9 +33,7 @@ const quotes = [
 .collect-quotes {
   &__container {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    width: 100%;
-    height: 100%;
   }
 }
 </style>

client/src/components/QuoteCard.vue

@@ -25,18 +25,20 @@ defineProps<{
   &__container {
     display: flex;
     align-items: center;
-    width: 460px;
+    width: 300px;
-    height: 210px;
+    height: 150px;
     margin: 32px;
     padding: 32px;
     background-color: $quote-background-color;
     border: $quote-border;
+    border-radius: 0 16px 0 0;
     color: $quote-text-color;
   }
 
   &__quote {
+    font-family: $font-secondary;
+    font-weight: bold;
     font-size: 24px;
-    border-radius: 0 16px 0 0;
     text-align: center;
   }
 }