From 7d12edfe17aca35abcb3d52318a16b77db06a68f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 8 Feb 2021 12:15:58 +0100
Subject: [PATCH] lesson 125: move the list to a component

---
 .../src/App.vue                               | 23 ++++++++++---------
 .../components/resources/LearningResource.vue | 20 ++++++++++++++++
 2 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue

diff --git a/2021-02-08 prj-cmp-01-starting-setup/src/App.vue b/2021-02-08 prj-cmp-01-starting-setup/src/App.vue
index 4dabf5a..a1f5109 100644
--- a/2021-02-08 prj-cmp-01-starting-setup/src/App.vue	
+++ b/2021-02-08 prj-cmp-01-starting-setup/src/App.vue	
@@ -1,21 +1,22 @@
 <template>
   <ul>
-    <li v-for="resource in storedResources" :key="resource.id">
-      {{ resource.title }}
-      <ul>
-        <li>
-          {{ resource.description }}
-        </li>
-        <li>
-          <a :href="resource.link">{{ resource.link }}</a>
-        </li>
-      </ul>
-    </li>
+    <learning-resource
+      v-for="resource in storedResources"
+      :key="resource.id"
+      :title="resource.title"
+      :description="resource.description"
+      :link="resource.link"
+    ></learning-resource>
   </ul>
 </template>
 
 <script>
+import LearningResource from './components/resources/LearningResource';
+
 export default {
+  components: {
+    LearningResource
+  },
   data() {
     return {
       storedResources: [
diff --git a/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue b/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue
new file mode 100644
index 0000000..3cc91e7
--- /dev/null
+++ b/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue	
@@ -0,0 +1,20 @@
+<template>
+  <li>
+    <div>
+      <header>
+        <h3>{{ title }}</h3>
+        <button>Delete</button>
+      </header>
+    </div>
+    <p>{{ description }}</p>
+    <nav><a :href="link">View Resource</a></nav>
+  </li></template
+>
+
+<script>
+export default {
+  props: ['title', 'description', 'link']
+};
+</script>
+
+<style></style>