created basic ui

starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-dialog v-model="dialog" class='my-20' width="800px">
+        <template #activator="{ on, attrs }">
+          <v-btn color="blue" v-bind="attrs" outlined v-on="on"
+            >Add Blog</v-btn
+          >
+        </template>
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">Create Your Blog</span>
+          </v-card-title>
+          <v-form >
+            <v-container>
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field label="Title" required></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-textarea dense label="Content" required></v-textarea>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+          <v-card-actions>
+            <v-btn color="blue lighten-2" outlined @click="dialog = false">
+              Save Blog
+            </v-btn>
+            <v-btn color="red lighten-2"  outlined @click="dialog = false">
+              Discard
+            </v-btn>
+
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AmanAddBlog',
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>

starter-project-web-vue2/components/amanabiy/AmanBlog.vue

@@ -0,0 +1,84 @@
+<template>
+
+  <v-list
+    flat
+    subheader
+    three-line
+    class="my-50"
+  >
+    <v-card class="my-20" width="90%">
+      <v-subheader> Blogs </v-subheader>
+      <div v-for="blog in blogs" :key="blog.id"> 
+        <v-list-item  :class="{'grey lighten-4': blog.id % 2 && !blog.done}">
+            <v-list-item-action>
+            </v-list-item-action>
+
+            <v-list-item-content>
+                <nuxt-link
+                  style="text-decoration: none; color: inherit"
+                  :to="'/amanabiy/' + blog.id"
+                >
+                    <v-list-item-title>{{ blog.title }}</v-list-item-title>
+                    <v-list-item-subtitle> <span class="font-weight-bold"> By {{blog.author}}: </span> {{ blog.desc }}</v-list-item-subtitle>
+                </nuxt-link>
+            </v-list-item-content>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="green">mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="red">mdi-delete</v-icon>
+              </v-btn>
+            </v-list-item-action>
+
+          </v-list-item>
+          <v-divider ></v-divider>
+      </div>
+    </v-card>
+  </v-list>
+</template>
+
+<script>
+  export default {
+    name: 'BlogsList',
+
+    data: () => {
+      return {
+
+        blogs: [
+          {
+            id: 1,
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: 2,
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: 3,
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: 4,
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+  }
+</script>

starter-project-web-vue2/pages/amanabiy/_id.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-app>
+    <nuxt-link style="text-decoration: none; color: inherit"  :to="'/amanabiy/'">
+      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
+        ><v-icon> mdi-chevron-left </v-icon></v-btn
+      ></nuxt-link
+    >
+
+    <v-card class="mx-6 my-6">
+      <v-card-title>
+        <span class="text-h6 font-weight-bold"
+          >{{ curr_blog.title }} <small>{{ curr_blog.id }}</small></span
+        >
+      </v-card-title>
+
+      <v-card-text class="subtitle-2">
+        {{ curr_blog.desc }}
+      </v-card-text>
+
+      <v-list-item class="font-weight-light">
+          <v-list-item-title class="-2 font-weight-light">By {{ curr_blog.author }}</v-list-item-title>
+      </v-list-item>
+    </v-card>
+  </v-app>
+</template>
+
+
+<script>
+  export default {
+    name: 'BlogCurr',
+
+    data: () => {
+      return {
+        curr_blog: {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+        },
+        blogs: [
+          {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: "2",
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: "3",
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: "4",
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+    created () {
+        this.curr_blog = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
+    },
+  }
+</script>
+

starter-project-web-vue2/pages/amanabiy/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-row class="my-12">
+        <AddBlog />
+      </v-row>
+      <v-row class="my-12">
+        <BlogPost />
+      </v-row>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/amanabiy/AmanBlog.vue'
+import AddBlog from '../../components/amanabiy/AmanAddBlog.vue'
+
+export default {
+  name: 'BlogPosts',
+  components: {
+    BlogPost,
+    AddBlog,
+  },
+}
+</script>

starter-project-web-vue2/pages/index.vue

@@ -67,6 +67,11 @@ export default {
           description: 'Web Team Member',
           link: '/liben/articles',
         },
+        {
+          name: "Amanuel Sisay",
+          description: "Web Team Member",
+          link: '/amanabiy',
+        },
       ],
     }
   },