<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>
