fix styling and add tags to container

Author: ibgrav

src/components/CustomTags/CustomTagsContainer.tsx

@@ -1,6 +1,7 @@
 import styles from "./styles.module.scss";
 import { ReactNode, useContext, useEffect } from "react";
 import { CustomTagsContext } from "./CustomTagsContext";
+import { CustomTagsFilterList } from "./CustomTagsFilterList";
 
 export interface CustomTagsContainerProps {
   tags: string; // comma-separated values
@@ -31,6 +32,8 @@ export default function CustomTagsContainer({
       }
     >
       {children}
+
+      <CustomTagsFilterList tags={tagList} />
     </div>
   );
 }

src/components/CustomTags/CustomTagsFilterList.tsx

@@ -0,0 +1,50 @@
+import { CSSProperties, useContext } from "react";
+import styles from "./styles.module.scss";
+import { CustomTagsContext } from "./CustomTagsContext";
+
+interface CustomTagsFilterListProps {
+  tags: string[];
+  style?: CSSProperties;
+  subtitle?: string;
+}
+
+export function CustomTagsFilterList({
+  tags,
+  style,
+  subtitle,
+}: CustomTagsFilterListProps) {
+  const [{ filter }, setState] = useContext(CustomTagsContext);
+
+  if (tags.length < 1) return null;
+
+  const onClickFilter = (update: string) => {
+    if (filter === update) update = undefined; // toggle off
+
+    setState((state) => ({ ...state, filter: update }));
+
+    const article = document.querySelector("article");
+
+    if (article) {
+      article.classList[update ? "add" : "remove"](
+        styles["custom-tag-toggled"],
+      );
+    }
+  };
+
+  return (
+    <div className={styles["custom-tags-filters"]} style={style}>
+      {subtitle && <b>{subtitle}</b>}
+
+      <ul>
+        {tags.map((tag) => (
+          <li
+            key={tag}
+            className={filter === tag ? styles["custom-tags-active"] : ""}
+          >
+            <button onClick={() => onClickFilter(tag)}>{tag}</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/CustomTags/CustomTagsFilters.tsx

@@ -1,40 +1,9 @@
 import { useContext } from "react";
-import styles from "./styles.module.scss";
 import { CustomTagsContext } from "./CustomTagsContext";
+import { CustomTagsFilterList } from "./CustomTagsFilterList";
 
 export default function CustomTagsFilters() {
-  const [{ tags, filter }, setState] = useContext(CustomTagsContext);
+  const [{ tags }] = useContext(CustomTagsContext);
 
-  if (tags.length < 1) return null;
-
-  const onClickFilter = (update: string) => {
-    if (filter === update) update = undefined; // toggle off
-
-    setState((state) => ({ ...state, filter: update }));
-
-    const article = document.querySelector("article");
-
-    if (article) {
-      article.classList[update ? "add" : "remove"](
-        styles["custom-tag-toggled"],
-      );
-    }
-  };
-
-  return (
-    <div className={styles["custom-tags-filters"]}>
-      <b>Tags: </b>
-
-      <ul>
-        {tags.map((tag) => (
-          <li
-            key={tag}
-            className={filter === tag ? styles["custom-tags-active"] : ""}
-          >
-            <button onClick={() => onClickFilter(tag)}>{tag}</button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
+  return <CustomTagsFilterList tags={tags} subtitle="Tags: " />;
 }

src/components/CustomTags/styles.module.scss

@@ -2,10 +2,11 @@
   display: flex;
   flex-flow: row;
   gap: 0.5em;
-  margin-bottom: 1.5em;
+  margin: 0 0 1.5em 0;
+  padding: 0;
 
   ul {
-    margin: 0 0 1em 0;
+    margin: 0;
     padding: 0;
     display: flex;
     flex-flow: row;
@@ -46,9 +47,11 @@
 }
 
 .custom-tag-toggled {
-  // all siblings after first paragraph
+  // all siblings after first paragraph, except for tags and filtered container
   p:first-of-type
-    ~ *:not(.custom-tags-filters):not(.custom-tags-container-visible) {
+    ~ *:not(.custom-tags-filters):not(.custom-tags-container-visible):not(
+      .custom-tags-container-visible *
+    ) {
     display: none;
   }
 }