From 69e590ea13d36743056987b79dd54873053a7275 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Sat, 6 Feb 2021 17:24:16 +0100
Subject: [PATCH] lesson 109: adding slots

---
 .../src/components/BadgeList.vue              | 28 ++++++++-----------
 .../src/components/BaseCard.vue               | 17 +++++++++++
 .../src/components/UserInfo.vue               | 14 ++--------
 .../src/main.js                               |  2 ++
 4 files changed, 33 insertions(+), 28 deletions(-)
 create mode 100644 2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue

diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue
index fcdf72b..910c4f6 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue	
@@ -1,26 +1,20 @@
 <template>
     <section>
-        <h2>Available Badges</h2>
-        <ul>
-            <li>
-                <base-badge type="admin" caption="ADMIN"></base-badge>
-            </li>
-            <li>
-                <base-badge type="author" caption="AUTHOR"></base-badge>
-            </li>
-        </ul>
+        <base-card>
+            <h2>Available Badges</h2>
+            <ul>
+                <li>
+                    <base-badge type="admin" caption="ADMIN"></base-badge>
+                </li>
+                <li>
+                    <base-badge type="author" caption="AUTHOR"></base-badge>
+                </li>
+            </ul>
+        </base-card>
     </section>
 </template>
 
 <style scoped>
-section {
-    margin: 2rem auto;
-    max-width: 30rem;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-    padding: 1rem;
-}
-
 section h2 {
     margin: 0.5rem 0;
     color: #3a3a3a;
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue
new file mode 100644
index 0000000..c1d1b2f
--- /dev/null
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue	
@@ -0,0 +1,17 @@
+<template>
+    <div><slot></slot></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+div {
+    margin: 2rem auto;
+    max-width: 30rem;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    padding: 1rem;
+}
+</style>
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue
index c8f3221..f00ec32 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue	
@@ -1,10 +1,10 @@
 <template>
     <section>
-        <div>
+        <base-card>
             <h3>{{ fullName }}</h3>
             <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
-        </div>
-        <p>{{ infoText }}</p>
+            <p>{{ infoText }}</p>
+        </base-card>
     </section>
 </template>
 
@@ -15,14 +15,6 @@ export default {
 </script>
 
 <style>
-section {
-    margin: 2rem auto;
-    max-width: 30rem;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-    padding: 1rem;
-}
-
 section header {
     display: flex;
     justify-content: space-between;
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/main.js b/2021-02-06 cmp-adv-01-starting-setup/src/main.js
index 66d2c0c..5c5b0cb 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/main.js	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/main.js	
@@ -2,9 +2,11 @@ import { createApp } from "vue";
 
 import App from "./App.vue";
 import BaseBadge from "./components/BaseBadge.vue";
+import BaseCard from "./components/BaseCard.vue";
 
 const app = createApp(App);
 
 app.component("base-badge", BaseBadge);
+app.component("base-card", BaseCard);
 
 app.mount("#app");