lesson 131: add the AddResource form

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

@@ -1,10 +1,10 @@
 <template>
-  <button :type="type" :class="mode"><slot></slot></button>
+  <button :class="mode"><slot></slot></button>
 </template>
 
 <script>
 export default {
-  props: ['type', 'mode']
+  props: ['mode']
 };
 </script>
 

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

@@ -1,9 +1,53 @@
 <template>
-  <h2>Add Resource</h2>
+  <base-card>
+    <form>
+      <div class="form-control">
+        <label for="title">Title</label>
+        <input type="text" name="title" id="title" />
+      </div>
+      <div class="form-control">
+        <label for="description">Description</label>
+        <textarea name="description" id="description" rows="3"></textarea>
+      </div>
+      <div class="form-control">
+        <label for="link">Link</label>
+        <input type="text" name="link" id="link" />
+      </div>
+      <div>
+        <base-button type="submit">Add Resource</base-button>
+      </div>
+    </form>
+  </base-card>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style scoped>
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+input,
+textarea {
+  display: block;
+  width: 100%;
+  font: inherit;
+  padding: 0.15rem;
+  border: 1px solid #ccc;
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: #3a0061;
+  background-color: #f7ebff;
+}
+
+.form-control {
+  margin: 1rem 0;
+}
+</style>