Add component for single shortcuts

src/components/misc/keyboard-shortcuts.vue

@@ -5,11 +5,7 @@
 				<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
 					<p>
 						<strong>Toggle The Menu</strong>
-						<span class="shortcuts">
-								<span>ctrl</span>
-								<i>+</i>
-								<span>e</span>
-							</span>
+						<shortcut :keys="['ctrl', 'e']"/>
 					</p>
 					<h3>Kanban</h3>
 					<div class="message is-primary" v-if="$route.name === 'list.kanban'">
@@ -19,11 +15,7 @@
 					</div>
 					<p>
 						<strong>Mark a task as done</strong>
-						<span class="shortcuts">
-								<span>ctrl</span>
-								<i>+</i>
-								<span>click</span>
-							</span>
+						<shortcut :keys="['ctrl', 'click']"/>
 					</p>
 					<h3>Task Page</h3>
 					<div
@@ -35,33 +27,23 @@
 					</div>
 					<p>
 						<strong>Assign this task to a user</strong>
-						<span class="shortcuts">
-								<span>a</span>
-							</span>
+						<shortcut :keys="['a']"/>
 					</p>
 					<p>
 						<strong>Add labels to this task</strong>
-						<span class="shortcuts">
-								<span>l</span>
-							</span>
+						<shortcut :keys="['l']"/>
 					</p>
 					<p>
 						<strong>Change the due date of this task</strong>
-						<span class="shortcuts">
-								<span>d</span>
-							</span>
+						<shortcut :keys="['d']"/>
 					</p>
 					<p>
 						<strong>Add an attachment to this task</strong>
-						<span class="shortcuts">
-								<span>f</span>
-							</span>
+						<shortcut :keys="['f']"/>
 					</p>
 					<p>
 						<strong>Modify related tasks of this task</strong>
-						<span class="shortcuts">
-								<span>r</span>
-							</span>
+						<shortcut :keys="['r']"/>
 					</p>
 				</card>
 			</div>
@@ -71,9 +53,11 @@
 
 <script>
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import Shortcut from '@/components/misc/shortcut'
 
 export default {
 	name: 'keyboard-shortcuts',
+	components: {Shortcut},
 	methods: {
 		close() {
 			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)

src/components/misc/shortcut.vue

@@ -0,0 +1,20 @@
+<template>
+	<span class="shortcuts">
+		<template v-for="(k, i) in keys">
+			<span :key="i">{{ k }}</span>
+			<i v-if="i < keys.length - 1" :key="`plus${i}`">+</i>
+		</template>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'shortcut',
+	props: {
+		keys: {
+			type: Array,
+			required: true,
+		}
+	},
+}
+</script>