2 files changed, 60 insertions, 0 deletions
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
new file mode 100644
index 00000000..56d68430
--- /dev/null
+++ b/src/components/lists/lists.js
@@ -0,0 +1,27 @@
+import ListsCard from '../lists_card/lists_card.vue'
+
+const Lists = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    ListsCard
+  },
+  computed: {
+    lists () {
+      return this.$store.state.lists.allLists
+    }
+  },
+  methods: {
+    cancelNewList () {
+      this.isNew = false
+    },
+    newList () {
+      this.isNew = true
+    }
+  }
+}
+
+export default Lists
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
new file mode 100644
index 00000000..b8bab0a0
--- /dev/null
+++ b/src/components/lists/lists.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="Lists panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('lists.lists') }}
+      </div>
+      <router-link
+        :to="{ name: 'lists-new' }"
+        class="button-default btn new-list-button"
+      >
+        {{ $t("lists.new") }}
+      </router-link>
+    </div>
+    <div class="panel-body">
+      <ListsCard
+        v-for="list in lists.slice().reverse()"
+        :key="list"
+        :list="list"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./lists.js"></script>
+
+<style lang="scss">
+.Lists {
+  .new-list-button {
+    padding: 0 0.5em;
+  }
+}
+</style>