ブログ詳細画面にtagをつけた

  • diary

このブログには「日記」と「技術記事」と「その間の文章」を混ぜて書きたいのでタグをつけた。リンク先はないので週末に作業する。
今回は雑な JSX と 素の CSS で書いたけどやっぱり手になじまないので、モバイルアプリの UI を組む感覚に近づけたいと思っている。Chakra UI が求めているものに近い感じがするのでこの三連休で入門したい。

<ul id="tags">
  {post.tags.map((tag) => (
    <li className="tag" key={tag}>
      {tag}
    </li>
  ))}
</ul>
#tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.tag {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px 8px 0;
  padding: 2px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  list-style: none;
  border-radius: 6px;
  background: #eee;
}