From 20d41f2ef4b6d1f521827298929be60607c9aadd Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 28 Dec 2018 13:56:14 +0000
Subject: [PATCH] Use a slot

---
 src/components/DrupalMessage.vue | 21 ++++++++++++---------
 src/components/Welcome.vue       |  8 +++++++-
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/DrupalMessage.vue b/src/components/DrupalMessage.vue
index 56f5978..e7bd757 100644
--- a/src/components/DrupalMessage.vue
+++ b/src/components/DrupalMessage.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="bg-green pl-2 rounded-sm">
-    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center border-green-light text-green-dark bg-green-lighter rounded-sm">
-      <svg class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
-
-      <p>
-        A Bartik clone, built with
-        <a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
-        and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
-      </p>
+  <div class="pl-2 rounded-sm" :class="{'bg-green': type == 'status'}">
+    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="{'border-green-light text-green-dark bg-green-lighter': type == 'status'}">
+      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+      <slot></slot>
     </div>
   </div>
 </template>
+
+<script>
+export default {
+  props: {
+    type: String,
+  },
+}
+</script>
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 67416ee..c887e13 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -23,7 +23,13 @@
 
     <div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
       <div class="container mx-auto px-4">
-        <drupal-message />
+        <drupal-message type="status">
+          <p>
+            A Bartik clone, built with
+            <a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
+          </p>
+        </drupal-message>
 
         <div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
           <div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">