testing kraken push to repo

README.md

@@ -22,3 +22,5 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+# vuemastery
+# vuemastery

prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    singleQuote: true,
+    semi: false
+  }

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link :to="{ name: 'EventList' }">Events</router-link> |
+      <router-link :to="{ name: 'About' }">About</router-link>
     </div>
     <router-view />
   </div>
@@ -29,4 +29,8 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+h4 {
+  font-size: 20px;
+}
 </style>

src/components/EventCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <router-link class="event-link" :to="{ name: 'EventDetails', params: { id: event.id } }">
+    <div class="event-card">
+      <span>@{{ event.time }} on {{ event.date }}</span>
+      <h4>{{ event.title }}</h4>
+    </div>
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    event: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
+
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
+
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
+</style>