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

<ul class="tags-list" role="list">
	{
		list.map((tag, index) => (
			<li>
				{tag}{index + 1 < list.length && <span>, </span>}
			</li>
		))
	}
</ul>

<style>
	.tags-list {
		margin: var(--space-2xs) 0;
	}
	.tags-list li {
		display: inline;
		font-size: var(--size--1);
		font-weight: 500;
		color: var(--color-blue);
	}
</style>