1 files changed, 62 insertions, 0 deletions
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
new file mode 100644
index 00000000..323855b9
--- /dev/null
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="sticker-picker"
+  >
+    <tab-switcher
+      class="tab-switcher"
+      :render-only-focused="true"
+      scrollable-tabs
+    >
+      <div
+        v-for="stickerpack in pack"
+        :key="stickerpack.path"
+        :image-tooltip="stickerpack.meta.title"
+        :image="stickerpack.path + stickerpack.meta.tabIcon"
+        class="sticker-picker-content"
+      >
+        <div
+          v-for="sticker in stickerpack.meta.stickers"
+          :key="sticker"
+          class="sticker"
+          @click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)"
+        >
+          <img
+            :src="stickerpack.path + sticker"
+          >
+        </div>
+      </div>
+    </tab-switcher>
+  </div>
+</template>
+
+<script src="./sticker_picker.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.sticker-picker {
+  width: 100%;
+  position: relative;
+  .tab-switcher {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .sticker-picker-content {
+    .sticker {
+      display: inline-block;
+      width: 20%;
+      height: 20%;
+      img {
+        width: 100%;
+        &:hover {
+          filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+        }
+      }
+    }
+  }
+}
+
+</style>