lesson 128: add a base button

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

@@ -0,0 +1,37 @@
+<template>
+  <button :type="type" :class="mode"><slot></slot></button>
+</template>
+
+<script>
+export default {
+  props: ['type', 'mode']
+};
+</script>
+
+<style scoped>
+button {
+  padding: 0.75rem 1.5rem;
+  font-family: inherit;
+  background-color: #3a0061;
+  border: 1px solid #3a0061;
+  color: white;
+  cursor: pointer;
+}
+
+button:hover,
+button:active {
+  background-color: #270041;
+  border-color: #270041;
+}
+
+.flat {
+  background-color: transparent;
+  color: #3a0061;
+  border: none;
+}
+
+.flat:hover,
+.flat:active {
+  background-color: #edd2ff;
+}
+</style>

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

@@ -3,7 +3,7 @@
     <base-card>
       <header>
         <h3>{{ title }}</h3>
-        <button>Delete</button>
+        <base-button mode="flat">Delete</base-button>
       </header>
       <p>{{ description }}</p>
       <nav><a :href="link">View Resource</a></nav>

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

@@ -2,8 +2,10 @@ import { createApp } from 'vue';
 
 import App from './App.vue';
 import BaseCard from './components/UI/BaseCard';
+import BaseButton from './components/UI/BaseButton';
 
 const app = createApp(App);
 
 app.component('base-card', BaseCard);
+app.component('base-button', BaseButton);
 app.mount('#app');