refactor: ♻️ split up App.vue into separate components

src/components/Gallery.vue

@@ -1,37 +1,24 @@
 <template>
   <div class="gallery">
-    <div class="big-image">
-      <figure class="image-container">
+    <div class="gallery__bigimage">
+      <figure class="gallery__imagecontainer">
         <img :src="bigImage" alt="" />
         <figcaption>
           {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
         </figcaption>
       </figure>
     </div>
-    <ul class="thumbnails">
-      <li class="thumbnail" v-for="(img, index) in images" :key="index">
-        <img
-          :src="img"
-          :alt="'Image' + index"
-          @click.prevent="setBigImage(index)"
-        />
-      </li>
-    </ul>
+    <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
   name: "gallery",
-  props: {
-    images: {
-      type: Array,
-      required: true
-    }
-  },
   data() {
     return {
-      bigImage: ""
+      bigImage: "",
+      images: []
     };
   },
   methods: {
@@ -40,108 +27,100 @@ export default {
     }
   },
   mounted() {
-    this.bigImage = this.images[0];
+    const images = Array.from(this.$el.querySelectorAll("li img"));
+
+    images.forEach((img, idx) => {
+      img.addEventListener("click", e => {
+        e.preventDefault();
+        this.setBigImage(idx);
+      });
+    });
+
+    this.images = images.map(img => img.src);
+    this.bigImage = images[0].src;
   }
 };
 </script>
 
-<style lang="scss" scoped>
-.big-image {
-  width: 100%;
-  height: 40vh;
+<style lang="scss">
+@import "@scss/_variables.scss";
 
-  @media (min-width: 35em) {
-    height: 30em;
+.gallery {
+  &__bigimage {
+    width: 100%;
+    height: 40vh;
+
+    @media (min-width: 35em) {
+      height: 30em;
+    }
+
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+
+    background-color: $copy-color-darkgrey;
+
+    overflow: hidden;
   }
 
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
+  &__imagecontainer {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    box-shadow: inset 0 0 15em #000;
 
-  background-color: #444;
+    img {
+      align-self: center;
+      max-width: 100%;
+      max-height: 100%;
+    }
 
-  overflow: hidden;
-}
-
-.image-container {
-  position: relative;
-
-  margin: 0;
-
-  width: 100%;
-  height: 100%;
-
-  flex: 1;
-
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-
-  box-shadow: inset 0 0 15em #000;
-
-  img {
-    align-self: center;
-
-    max-width: 100%;
-    max-height: 100%;
+    figcaption {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(#000, 0.5);
+      color: $copy-color;
+      text-align: center;
+    }
   }
 
-  figcaption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  ul {
+    display: flex;
+    list-style: none;
+    height: 6.5em;
+    margin: 0;
+    padding: 0.5em;
+    overflow-x: scroll;
+    background-color: $copy-color-darkgrey;
+  }
 
-    background-color: rgba(#000, 0.5);
-    color: #fff;
+  li {
+    flex: 1 0 auto;
     text-align: center;
-  }
-}
-
-.thumbnails {
-  display: flex;
-  align-content: center;
-  align-items: center;
-
-  height: 6.5em;
-
-  padding: 0.5em;
-
-  overflow-x: scroll;
-
-  background-color: #888;
-}
-
-.thumbnail {
-  flex: 1 0 auto;
-
-  height: 100%;
-
-  max-width: 100%;
-  max-height: 100%;
-
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-
-  & + .thumbnail {
-    margin-left: 0.5em;
-  }
-
-  img {
-    cursor: pointer;
-
-    box-sizing: border-box;
-
-    border: 0.25em solid #fff;
-
-    align-self: center;
-
+    height: 100%;
     max-width: 100%;
     max-height: 100%;
+
+    & + li {
+      margin-left: 0.5em;
+    }
+
+    img {
+      cursor: pointer;
+      border: 0.25em solid #fff;
+      align-self: center;
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 }
 </style>