Blueprint title fixes and clickable tags

apps/blueprints/src/components/Panel.tsx

@@ -23,16 +23,16 @@ const StyledPanel = styled(Box)`
     display: flex;
     align-items: center;
   }
+`;
 
-  .panel-content {
-    color: white;
-    height: 100%;
-    padding: 12px;
-    background: #414040;
-    box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
-      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
-      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
-  }
+const StyledPanelContent = styled.div`
+  color: white;
+  height: 100%;
+  padding: 12px;
+  background: #414040;
+  box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
+    -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 0 3px 3px -3px #8f8c8b,
+    0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
 `;
 
 interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {
@@ -43,7 +43,7 @@ interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {
 export const Panel: React.FC<PanelProps> = ({ title, bottom, children, className, ...props }) => (
   <StyledPanel className={clsx("panel", className)} {...props}>
     {title && <h2 className="title">{title}</h2>}
-    <div className="panel-content">{children}</div>
+    <StyledPanelContent>{children}</StyledPanelContent>
     {bottom && <div className="panel-inset">{bottom}</div>}
   </StyledPanel>
 );

apps/blueprints/src/components/blueprint/Blueprint.tsx

@@ -151,12 +151,7 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
       <Panel
         className="entities"
         gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
-        title={
-          <span>
-            Components for{" "}
-            {data?.blueprint?.label ? <FactorioCode code={data.blueprint.label} /> : "blueprint"}
-          </span>
-        }
+        title={<span>Components</span>}
       >
         {data && <BlueprintEntities data={data} />}
       </Panel>

apps/blueprints/src/components/blueprint/BlueprintBook.tsx

@@ -223,16 +223,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
         <Panel
           className="entities"
           gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
-          title={
-            <span>
-              Components for{" "}
-              {selectedData?.blueprint?.label ? (
-                <FactorioCode code={selectedData.blueprint.label} />
-              ) : (
-                "blueprint"
-              )}
-            </span>
-          }
+          title={<span>Components</span>}
         >
           {selectedData && <BlueprintEntities data={selectedData} />}
         </Panel>
@@ -241,7 +232,15 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
       <Panel
         className="bp-strings"
         gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 4" })}
-        title={`data for ${selected.type.replace("_", " ")} "${selected.data.label}"`}
+        title={
+          <>
+            <span css={{ marginRight: "5px" }}>{`data for ${selected.type.replace(
+              "_",
+              " "
+            )}`}</span>
+            {selectedData?.blueprint?.label && <FactorioCode code={selectedData.blueprint.label} />}
+          </>
+        }
       >
         {selectedBlueprintString && (
           <BlueprintData

apps/blueprints/src/components/blueprint/BlueprintTags.tsx

@@ -2,6 +2,8 @@ import { Box } from "@chakra-ui/react";
 import { BlueprintPage } from "@factorio-sites/types";
 import styled from "@emotion/styled";
 import { TAGS_BY_KEY } from "@factorio-sites/common-utils";
+import { useRouter } from "next/router";
+import { useRouterQueryToHref } from "../../hooks/query.hook";
 
 const StyledBox = styled(Box)`
   text-align: left;
@@ -13,6 +15,10 @@ const StyledBox = styled(Box)`
     background: #313131;
     border-radius: 3px;
   }
+
+  .tag:hover {
+    cursor: pointer;
+  }
 `;
 
 interface BlueprintTagsProps {
@@ -20,11 +26,18 @@ interface BlueprintTagsProps {
 }
 
 export const BlueprintTags: React.FC<BlueprintTagsProps> = ({ blueprint_page }) => {
+  const router = useRouter();
+  const routerQueryToHref = useRouterQueryToHref();
+
   return (
     <StyledBox>
       {blueprint_page.tags.length ? (
         blueprint_page.tags.map((tag) => (
-          <span key={tag} className="tag">
+          <span
+            key={tag}
+            className="tag"
+            onClick={() => router.push(routerQueryToHref({ tags: [tag] }, true))}
+          >
             {TAGS_BY_KEY[tag].category}: {TAGS_BY_KEY[tag].label}
           </span>
         ))

apps/blueprints/src/hooks/query.hook.ts

@@ -1,20 +1,13 @@
 import { useRouter } from "next/router";
 import { useCallback } from "react";
+import { stringifyQuery } from "../utils/query.utils";
 
 export const useRouterQueryToHref = () => {
   const router = useRouter();
   return useCallback(
-    (override: Record<string, string | string[] | null>) => {
-      const query = { ...router.query, ...override };
-      const keys = Object.keys(query).filter((key) => query[key] !== null);
-      const href = keys.length
-        ? "/?" +
-          Object.keys(query)
-            .filter((key) => query[key] !== null)
-            .map((key) => `${key}=${query[key]}`)
-            .join("&")
-        : "/";
-      return href;
+    (override: Record<string, string | string[] | null>, overrideAll = false) => {
+      const query = overrideAll ? override : { ...router.query, ...override };
+      return stringifyQuery(query);
     },
     [router]
   );

apps/blueprints/src/utils/query.utils.ts

@@ -7,3 +7,15 @@ export const queryValueAsArray = (value: string | string[] | undefined) => {
   }
   return [];
 };
+
+export const stringifyQuery = (query: Record<string, string | string[] | null | undefined>) => {
+  const keys = Object.keys(query).filter((key) => query[key] !== null);
+  const href = keys.length
+    ? "/?" +
+      Object.keys(query)
+        .filter((key) => query[key] !== null)
+        .map((key) => `${key}=${query[key]}`)
+        .join("&")
+    : "/";
+  return href;
+};