frontend/src/components/misc/shortcut.vue

43 lines
625 B
Vue

<template>
<span class="shortcuts">
<template v-for="(k, i) in keys" :key="i">
<kbd>{{ k }}</kbd>
<span v-if="i < keys.length - 1">{{ combination }}</span>
</template>
</span>
</template>
<script>
export default {
name: 'shortcut',
props: {
keys: {
type: Array,
required: true,
},
combination: {
type: String,
default: '+',
},
},
}
</script>
<style lang="scss" scoped>
.shortcuts {
display: flex;
align-items: center;
}
kbd {
padding: .1rem .35rem;
border: 1px solid $grey-300;
background: $grey-100;
border-radius: 3px;
font-size: .75rem;
}
span {
padding: 0 .25rem;
}
</style>