---
interface Props {
  keywords: string[];
}

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

<p role="list">
  {
    keywords.map((x, i) => (
      <>{i > 0 && " "}<span role="listitem"><a href={`/blog/keywords/${x}`}>#<b
              itemprop="keywords"
            >{x}</b></a></span></>
    ))
  }
</p>

<style>
  p {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: calc(var(--size-0) * 1em);
    margin-block: calc(var(--size-0) * 1em);
    margin-inline: auto;

    & > * > * {
      border-radius: calc(infinity * 1px);
      background-color: color-mix(
        in srgb,
        var(--color-active) 10%,
        transparent
      );
      color: var(--color-active);
      padding-inline: calc(var(--size-2) * 1em);
    }
  }
</style>