lesson 127: add a BaseCard component

2021-02-08 prj-cmp-01-starting-setup/src/App.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import TheHeader from './components/layout/TheHeader';
+import TheHeader from './components/layouts/TheHeader';
 import storedResources from './components/resources/StoredResources';
 export default {
   components: {

2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseCard.vue

@@ -0,0 +1,13 @@
+<template>
+  <div><slot></slot></div>
+</template>
+
+<style scoped>
+div {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 1rem;
+  margin: 2rem auto;
+  max-width: 40rem;
+}
+</style>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue

@@ -1,13 +1,13 @@
 <template>
   <li>
-    <div>
+    <base-card>
       <header>
         <h3>{{ title }}</h3>
         <button>Delete</button>
       </header>
-    </div>
-    <p>{{ description }}</p>
-    <nav><a :href="link">View Resource</a></nav>
+      <p>{{ description }}</p>
+      <nav><a :href="link">View Resource</a></nav>
+    </base-card>
   </li>
 </template>
 

2021-02-08 prj-cmp-01-starting-setup/src/main.js

@@ -1,7 +1,9 @@
 import { createApp } from 'vue';
 
 import App from './App.vue';
+import BaseCard from './components/UI/BaseCard';
 
 const app = createApp(App);
 
+app.component('base-card', BaseCard);
 app.mount('#app');