---
const { tags } = Astro.props
---

<div class="tag-container">
	{
		tags.sort().map((tag: string) => (
			<a class="tag" href={`/archive/${tag}`}>
				{tag}
			</a>
		))
	}
</div>

<style>
	.tag-container {
		margin: 10px 0;
	}

	.tag {
		font-size: 0.8rem;
		color: white;
		padding: 4px 8px;
		border-radius: 25px;
		background: var(--blue);
		line-height: 2rem;
		transition: filter 0.15s;
	}

	.tag:hover {
		text-decoration: none;
		filter: saturate(120%);
	}

	.tag:not(:last-child) {
		margin-right: 6px;
	}
</style>
