TagCloud: add component and implement tag-search feature

This component renders a cloud of tags with the string tags passed to
it, with each tag constituting a button that triggers search on click.
The cloud is also responsive to the color theme of the grid.

src/components/IconGrid/TagCloud.css

@@ -0,0 +1,32 @@
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 24px;
+}
+
+button.tag-button {
+  margin: 4px;
+  border-radius: 4px;
+  background-color: rgba(194, 186, 196, 0.25);
+  outline: none;
+  cursor: pointer;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+}
+
+button.tag-button:hover {
+  background-color: rgba(194, 186, 196, 0.7);
+}
+
+button.tag-button:focus {
+  box-shadow: 0 0 0 1px rgba(194, 186, 196, 0.7);
+}
+
+.tag-button code {
+  padding: 4px;
+  font-size: 12px;
+}
+
+.dark {
+  color: white;
+}

src/components/IconGrid/TagCloud.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from "react";
+import { useSetRecoilState } from "recoil";
+
+import { searchQueryAtom } from "../../state/atoms";
+import "./TagCloud.css";
+
+interface TagCloudProps {
+  name: string;
+  tags: string[];
+  isDark: boolean;
+}
+
+const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
+  const setQuery = useSetRecoilState(searchQueryAtom);
+  const handleTagClick = useCallback(
+    (tag: string) => {
+      setQuery(tag);
+      document.getElementById("search-input")?.focus();
+    },
+    [setQuery]
+  );
+
+  return (
+    <div className="tag-cloud">
+      {tags.map((tag) => (
+        <button
+          key={`${name}-tag-${tag}`}
+          className="tag-button"
+          onClick={() => void handleTagClick(tag)}
+        >
+          <code className={`${isDark ? "dark" : ""}`}>{tag}</code>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TagCloud;