moved code to own Source component

client/src/components/Source.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="source">
+    <div class="source__source">
+      {{ source }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['source'],
+}
+</script>
+
+<style lang="scss">
+.source {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 180px;
+  height: 30px;
+  margin: -15px 0 0 -90px;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+
+  &__source {
+    width: 100%;
+    color: #ffffff;
+    font-family: "Wendy One";
+    text-align: center;
+  }
+
+  &:hover {
+    background-color: rgba(128,128,128,0.5);
+    cursor: pointer;
+  }
+}
+</style>

client/src/components/Sources.vue

@@ -2,12 +2,12 @@
   <div class="sources">
     <div :class="['sources__container', 'sources__container-' + sources.length]">
       <div class="sources__container-ring">
-        <div
+        <Source
           v-for="(source, idx) in sources"
-          :class="['sources__source', 'sources__source-' + idx]"
+          :class="['sources__source-' + idx]"
+          :source="source"
           :key="source.id"
-        >
-          {{ source }}
+        />
         </div>
       </div>
     </div>
@@ -40,15 +40,6 @@ export default {
     height: 100%;
   }
 
-  &__source {
-    position: absolute;
-    width: 180px;
-    height: 20px;
-    margin: -10px 0 0 -90px;
-    border: 1px solid #e0e0e0;
-    color: #ffffff;
-  }
-
   &__container-2,
   &__container-3 {
     .sources__source-0 { left: 10%; top: 10%; }