From 7216e996d18180587ca51014ae93ba83810a370d Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sun, 10 Jul 2022 21:25:51 +0200
Subject: [PATCH] add banner

---
 src/App.vue | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index fc0d279..815ebb2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,35 @@
 <template>
   <div id="app">
+    <div v-if="showBanner" id="banner" class="warning">
+    <close-icon @click="showBanner = false"/>
+      Sqliteviz has got own space on the web,
+      <a href="https://sqliteviz.com/" target="_blank">sqliteviz.com</a>!
+        New builds will be published there, so we recommend you to switch to the
+        <a href="https://sqliteviz.com/app/#" target="_blank">
+        new link</a> to not miss new features.
+        This
+        <a
+          href="https://sqliteviz.com/docs/how-to-migrate-to-sqliteviz-dot-com/"
+          target="_blank"
+        >migration guide</a> will help if you're not sure how to migrate.
+    </div>
     <router-view/>
   </div>
 </template>
 
+<script>
+import CloseIcon from '@/components/svg/close'
+
+export default {
+  components: { CloseIcon },
+  data () {
+    return {
+      showBanner: true
+    }
+  }
+}
+</script>
+
 <style>
 @font-face {
   font-family: "Open Sans";
@@ -63,4 +89,25 @@ body {
 .CodeMirror-hints {
   z-index: 999 !important;
 }
+#banner {
+  position: fixed;
+  max-width: 500px;
+  box-sizing: border-box;
+  z-index: 1000;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 32px;
+  border-radius: var(--border-radius-big);
+  box-shadow: 0px 2px 9px rgba(80, 103, 132, 0.4);
+}
+#banner svg {
+  padding: 4px;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+#banner a {
+  color: var(--color-text-active);
+}
 </style>