From 199955d9077b05e0743b0436dfe2eb12901f72ed Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 24 Apr 2019 13:18:00 +0100
Subject: [PATCH] Make AlertMessage a component

---
 src/App.vue                     |  9 +++++++++
 src/components/AlertMessage.vue | 16 ++++++++++++++++
 src/main.js                     |  1 +
 src/views/Projects.vue          |  9 ---------
 4 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AlertMessage.vue

diff --git a/src/App.vue b/src/App.vue
index 52167ba..5940207 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,14 @@
 <template>
   <div>
+    <alert-message>
+      <p>
+        A clone of <a href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
+        Built with <a href="https://vuejs.org">Vue.js</a>
+        and <a href="https://tailwindcss.com">Tailwind CSS</a>
+        by <a href="https://www.oliverdavies.uk">Oliver Davies</a>.
+      </p>
+    </alert-message>
+
     <router-view/>
   </div>
 </template>
diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
new file mode 100644
index 0000000..4fa5e8b
--- /dev/null
+++ b/src/components/AlertMessage.vue
@@ -0,0 +1,16 @@
+<template>
+  <section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
+    <slot></slot>
+  </section>
+</template>
+
+<style type="postcss" scoped>
+a {
+  @apply underline;
+
+  &:hover,
+  &:focus {
+    @apply no-underline
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 9f43be8..0f6d5b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+Vue.component('alert-message', require('@/components/AlertMessage').default)
 Vue.component('page-title', require('@/components/PageTitle').default)
 
 new Vue({
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index f4859d0..dc759a2 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,14 +1,5 @@
 <template>
   <div>
-    <section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
-      <p>
-        A clone of <a class="underline hocus:no-underline" href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
-        Built with <a class="underline hocus:no-underline" href="https://vuejs.org">Vue.js</a>
-        and <a class="underline hocus:no-underline" href="https://tailwindcss.com">Tailwind CSS</a>
-        by <a class="underline hocus:no-underline" href="https://www.oliverdavies.uk">Oliver Davies</a>.
-      </p>
-    </section>
-
     <header class="bg-gray-900 text-white pt-4 pb-12">
       <div class="max-w-6xl mx-auto px-4">
         <div class="flex justify-between items-center -mx-4">