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:
parent
c4a39b3de4
commit
e99a90b383
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
))
|
||||
|
@ -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]
|
||||
);
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user