1
0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-03-17 21:17:57 +02:00

Blueprint title fixes and clickable tags

This commit is contained in:
Bart 2021-03-17 20:38:29 +01:00
parent c4a39b3de4
commit e99a90b383
6 changed files with 51 additions and 39 deletions

View File

@ -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>
);

View File

@ -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>

View File

@ -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

View File

@ -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>
))

View File

@ -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]
);

View File

@ -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;
};