feat: make tags selectable

Author: SidonieBouthors

components/ArticleBlock.tsx

@@ -29,7 +29,7 @@ export default function ArticleBlock({
       {tags.length != 0 ? (
         <div className="tags">
           {tags?.map((tag) => (
-            <Tag key={tag}>{tag}</Tag>
+            <Tag key={tag} tag={tag} />
           ))}
         </div>
       ) : null}

components/Tag.tsx

@@ -1,9 +1,52 @@
+"use client";
+
 import Link from "next/link";
-import { slug } from "github-slugger";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 interface TagProps {
-  children: string;
+  tag: string;
+  children?: string;
 }
-export function Tag({ children }: TagProps) {
-  return <span className="tag">{children}</span>;
+
+/**
+ * A tag component that can be used to filter content by tag.
+ * If no children are provided, the tag string will be displayed.
+ */
+export function Tag({ tag, children }: TagProps) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  function selectTag() {
+    console.log("Tag selected:", tag);
+
+    const params = new URLSearchParams(searchParams);
+
+    const currentTags = params.get("tags");
+    const tags = currentTags ? currentTags.split(" ") : [];
+    if (tags.includes(tag)) {
+      // Remove tag
+      tags.splice(tags.indexOf(tag), 1);
+    } else {
+      // Add tag
+      tags.push(tag);
+    }
+
+    params.set("tags", tags.join(" "));
+    // Remove tags parameter if empty
+    if (tags.length === 0) {
+      params.delete("tags");
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }
+
+  return children ? (
+    <button onClick={selectTag} className="tag">
+      {children}
+    </button>
+  ) : (
+    <button onClick={selectTag} className="tag">
+      {tag}
+    </button>
+  );
 }

styles/components/_tag.scss

@@ -8,6 +8,7 @@
 
 .tag {
   cursor: pointer;
+  border: none;
   font-family: $font-bold;
   font-size: 0.8rem;
   display: inline-block;