From c5ce2c21cb350c1bdf55fecc4dd8914f79ce6644 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Wed, 7 Oct 2020 15:47:56 -0400
Subject: [PATCH] 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 | 32 +++++++++++++++++++++++
 src/components/IconGrid/TagCloud.tsx | 38 ++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/IconGrid/TagCloud.css
 create mode 100644 src/components/IconGrid/TagCloud.tsx

diff --git a/src/components/IconGrid/TagCloud.css b/src/components/IconGrid/TagCloud.css
new file mode 100644
index 0000000..1ee8f94
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/IconGrid/TagCloud.tsx b/src/components/IconGrid/TagCloud.tsx
new file mode 100644
index 0000000..5d376b4
--- /dev/null
+++ b/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;