From c272f12c2f75ec92f64f5bc743fc4faba7328323 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 5 Nov 2019 17:03:46 +0100
Subject: [PATCH] Added Gallery component

---
 src/components/Gallery.vue | 109 +++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/components/Gallery.vue

diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
new file mode 100644
index 0000000..779a9a9
--- /dev/null
+++ b/src/components/Gallery.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="gallery">
+    <div class="big-image">
+      <div class="image-container">
+        <img :src="bigImage" alt="" />
+      </div>
+    </div>
+    <div class="thumbnails">
+      <div class="thumbnail" v-for="(img, index) in images" :key="index">
+        <img
+          :src="img"
+          :alt="'Image' + index"
+          @click.prevent="setBigImage(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "gallery",
+  props: {
+    images: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      bigImage: ""
+    };
+  },
+  methods: {
+    setBigImage(index) {
+      this.bigImage = this.images[index];
+    }
+  },
+  mounted() {
+    this.bigImage = this.images[0];
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.big-image {
+  width: 100%;
+  height: 480px;
+
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  background-color: #444;
+}
+
+.image-container {
+  flex: 1;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  img {
+    align-self: center;
+
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.thumbnails {
+  display: flex;
+  align-content: center;
+  align-items: center;
+
+  height: 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;
+
+  img {
+    align-self: center;
+
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+</style>