Renamed to `identicon` and make shared component

1 files changed, 45 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
new file mode 100644
index 00000000000..0edd820743f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -0,0 +1,45 @@
+<script>
+export default {
+  props: {
+    entityId: {
+      type: Number,
+      required: true,
+    },
+    entityName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    /**
+     * This method is based on app/helpers/application_helper.rb#project_identicon
+     */
+    identiconStyles() {
+      const allowedColors = [
+        '#FFEBEE',
+        '#F3E5F5',
+        '#E8EAF6',
+        '#E3F2FD',
+        '#E0F2F1',
+        '#FBE9E7',
+        '#EEEEEE',
+      ];
+
+      const backgroundColor = allowedColors[this.entityId % 7];
+
+      return `background-color: ${backgroundColor}; color: #555;`;
+    },
+    identiconTitle() {
+      return this.entityName.charAt(0).toUpperCase();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="avatar s40 identicon"
+    :style="identiconStyles">
+    {{identiconTitle}}
+  </div>
+</template>