From 4f248342659ed1af4e0d2cf725f270c1aa8744a1 Mon Sep 17 00:00:00 2001
From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com>
Date: Sat, 26 Sep 2020 13:03:13 +0200
Subject: [PATCH] Create banner to display when new version is available

---
 components/common/UpdateNotice.js         | 36 +++++++++++++++++++++++
 components/common/UpdateNotice.module.css | 15 ++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 components/common/UpdateNotice.js
 create mode 100644 components/common/UpdateNotice.module.css

diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js
new file mode 100644
index 00000000..a0d5f512
--- /dev/null
+++ b/components/common/UpdateNotice.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import useVersion from '../../hooks/useVersion';
+import Link from '../common/Link';
+import styles from './UpdateNotice.module.css';
+
+export default function UpdateNotice() {
+  const versions = useVersion();
+  console.log(versions);
+  if (!versions) return null;
+
+  const { current, latest } = versions;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.heading}>
+        <FormattedMessage
+          id="message.new-version-available"
+          default="Version {latest} available! Current version: {current}"
+          values={{
+            latest: latest,
+            current: current,
+          }}
+        />
+      </div>
+      <Link href="https://github.com/mikecao/umami" size="xsmall">
+        <div className={styles.message}>
+          <FormattedMessage
+            id="message.visit-github-update"
+            default="Click here to visit umami on github for instructions"
+          />
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css
new file mode 100644
index 00000000..ec3a113f
--- /dev/null
+++ b/components/common/UpdateNotice.module.css
@@ -0,0 +1,15 @@
+.wrapper {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: var(--font-size-xsmall);
+}
+.heading {
+  font-weight: 600;
+  margin: auto 10px;
+}
+.message,
+.heading {
+  display: inline-block;
+}