2 files changed, 54 insertions, 0 deletions
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.js b/src/components/bookmark_folder_card/bookmark_folder_card.js
new file mode 100644
index 00000000..9df28e19
--- /dev/null
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.js
@@ -0,0 +1,16 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const BookmarkFolderCard = {
+  props: [
+    'folder'
+  ]
+}
+
+export default BookmarkFolderCard
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.vue b/src/components/bookmark_folder_card/bookmark_folder_card.vue
new file mode 100644
index 00000000..10875e78
--- /dev/null
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="bookmark-folder-card">
+    <router-link
+      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
+      class="bookmark-folder-name"
+    >
+      {{ folder.name }}
+    </router-link>
+    <router-link
+      :to="{ name: 'bookmark-folder' /* -edit' */, params: { id: folder.id } }"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./bookmark_folder_card.js"></script>
+
+<style lang="scss">
+.bookmark-folder-card {
+  display: flex;
+}
+
+.bookmark-folder-name {
+  flex-grow: 1;
+}
+
+.bookmark-folder-name,
+.button-folder-edit {
+  margin: 0;
+  padding: 1em;
+  color: var(--link);
+}
+</style>