---
import "../styles/tagList.scss";

const { extraFront, tags, extraBack } = Astro.props;
---

<div class="tags">
  {extraFront}
  {
    tags.toSorted().map((tag) => (
      <a href={`/tags/${tag}`} class="tag">
        <i class="fa fa-tag" aria-hidden="true" />
        <span class="text">{tag}</span>
      </a>
    ))
  }
  {extraBack}
</div>
