43 lines
665 B
Vue
43 lines
665 B
Vue
|
<template>
|
||
|
|
<ul class="tags nolist">
|
||
|
|
<li
|
||
|
|
v-for="tag in tags"
|
||
|
|
:key="`tag-${tag.slug}`"
|
||
|
|
class="tag"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
:href="`/tag/${tag.slug}`"
|
||
|
|
class="link"
|
||
|
|
>{{ tag.name }}</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
tags: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tag .link {
|
||
|
|
color: var(--link);
|
||
|
|
background: var(--background);
|
||
|
|
display: inline-block;
|
||
|
|
padding: .5rem;
|
||
|
|
margin: 0 .25rem .25rem 0;
|
||
|
|
box-shadow: 0 0 2px var(--shadow-weak);
|
||
|
|
text-decoration: none;
|
||
|
|
text-transform: capitalize;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|