---
import { Tag } from 'src/types';

interface Props {
	tags: Tag[];
}

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

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

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

	.tag {
		font-size: 1rem;
		line-height: 2rem;
	}

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