From 40f6368efc303d2e392bae7b423a92de4d504652 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sat, 23 Nov 2019 16:24:04 +0100
Subject: [PATCH] Adding version info tag

---
 src/components/Tag.svelte | 32 ++++++++++++++++++++++++++++++++
 src/routes/Edit.svelte    | 14 ++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/Tag.svelte

diff --git a/src/components/Tag.svelte b/src/components/Tag.svelte
new file mode 100644
index 00000000..d769a7c0
--- /dev/null
+++ b/src/components/Tag.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let title = '';
+	export let noPadding = false;
+	let contentClass = 'padding';
+	if (noPadding) {
+		contentClass = '';
+	}
+</script>
+
+<style>
+	#tag {
+		height: auto;
+    margin: 0 8px 0 0;
+    padding: 0 7px;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    cursor: default;
+		font-size: smaller;
+		/* padding: 8px; */
+		color: #52c41a;
+    background: #f6ffed;
+    border-color: #b7eb8f;
+		margin-left: 8px;
+	}
+</style>
+
+<div id="tag">
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/src/routes/Edit.svelte b/src/routes/Edit.svelte
index 88f5d247..240f4a06 100644
--- a/src/routes/Edit.svelte
+++ b/src/routes/Edit.svelte
@@ -4,8 +4,12 @@ import Editor from '../components/Editor.svelte';
 import Config from '../components/Config.svelte';
 import View from '../components/View.svelte';
 import Card from '../components/Card.svelte';
+import Tag from '../components/Tag.svelte';
 import Links from '../components/Links.svelte';
 import { fromUrl } from '../code-store.js';
+import pkg from '@mermaid-js/mermaid/package.json'
+
+export let mermaidVersion = pkg.version
 
 onMount(async () => {
 	ga('send', 'pageview');
@@ -44,6 +48,13 @@ onMount(async () => {
 		margin-top: 0;
 	}
 
+	#power {
+		width: 100%;
+    display: flex;
+    justify-content: flex-end;
+		align-items: center;
+	}
+
 </style>
 <div>
 	<h1 id="app-title">Mermaid Live Editor</h1>
@@ -55,6 +66,9 @@ onMount(async () => {
 		<div id="col2">
 			<Card title="Preview"><View /></Card>
 			<Card title="Actions"><Links /></Card>
+			<div id="power">
+				Powered by mermaid <Tag color='green'>{mermaidVersion}</Tag>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file