Resolve #747

2 files changed, 70 insertions, 0 deletions

diff --git a/src/client/app/common/views/components/integrations.integration.vue b/src/client/app/common/views/components/integrations.integration.vue
new file mode 100644
index 0000000000..4008054b68
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.integration.vue
@@ -0,0 +1,44 @@
+<template>
+<a class="zxrjzpcj" :href="url" :class="service" target="_blank">
+	<fa :icon="icon" size="lg" fixed-width /><span>{{ text }}</span>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['url', 'text', 'icon', 'service']
+});
+</script>
+
+<style lang="stylus" scoped>
+.zxrjzpcj
+	padding 6px 8px 6px 6px
+	border-radius 32px
+
+	&:hover
+		text-decoration none
+
+	&.twitter
+		color #fff
+		background #1da1f3
+
+		&:hover
+			background #0c87cf
+
+	&.github
+		color #fff
+		background #171515
+
+		&:hover
+			background #000
+
+	&.discord
+		color #fff
+		background #7289da
+
+		&:hover
+			background #4968ce
+
+</style>
diff --git a/src/client/app/common/views/components/integrations.vue b/src/client/app/common/views/components/integrations.vue
new file mode 100644
index 0000000000..7a341a14fd
--- /dev/null
+++ b/src/client/app/common/views/components/integrations.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="nbogcrmo" :v-if="user.twitter || user.github || user.discord">
+	<x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/>
+	<x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/>
+	<x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XIntegration from './integrations.integration.vue';
+
+export default Vue.extend({
+	components: {
+		XIntegration
+	},
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.nbogcrmo
+	> *
+		margin-right 10px
+
+</style>