Add a get started link when no configuration is found

[github/bastienwirtz/homer.git] / src / components / GetStarted.vue

diff --git a/src/components/GetStarted.vue b/src/components/GetStarted.vue
new file mode 100644 (file)
index 0000000..dcabc02
--- /dev/null
+++ b/src/components/GetStarted.vue
@@ -0,0 +1,35 @@
+<template>
+  <article>
+    <div class="m-6 has-text-centered py-6">
+      <p class="is-size-5 mb-0">No configured service found!</p>
+      <p>Check out the documentation to start building your Homer dashboard.</p>
+      <p>
+        <a
+          class="button is-primary mt-5 has-text-weight-bold"
+          href="https://github.com/bastienwirtz/homer/blob/main/README.md#getting-started"
+          target="_blank"
+        >
+          Get started
+        </a>
+      </p>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "GetStarted",
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  color: #4a4a4a;
+}
+
+body #app a {
+  font-weight: 900;
+  color: #ffffff;
+  font-family: "Lato", sans-serif;
+}
+</style>