games/factorio-sites
1
0
Fork 0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-03-26 22:20:08 +02:00
Code Issues Releases Activity

Merge pull request #112 from barthuijgen/develop

Browse Source 
Develop
This commit is contained in:
Bart 2021-04-12 01:30:18 +02:00 committed by GitHub
commit 663579a4e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
apps/blueprints/src/components/Pagination.tsx
View File

@ -1,7 +1,9 @@
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { Box, BoxProps, Button } from "@chakra-ui/react";
import { Box, BoxProps } from "@chakra-ui/react";
import ReactPaginate from "react-paginate";
import { FaEllipsisH, FaAngleDoubleLeft, FaAngleDoubleRight } from "react-icons/fa";
import styled from "@emotion/styled";
interface PaginationProps {
page: number;
@ -9,32 +11,106 @@ interface PaginationProps {
totalItems?: number;
}
const PaginationLink: React.FC<PaginationProps> = ({ page }) => {
export const Pagination: React.FC<BoxProps & PaginationProps> = ({
page,
totalPages = 0,
totalItems = 0,
}) => {
const router = useRouter();
const query: Record<string, string> = { ...router.query, page: page.toString() };
const href =
"/?" +
Object.keys(query)
const handlePageChange = ({ selected }: { selected: number }) => {
const query: Record<string, string> = { ...router.query, page: String(selected + 1) };
const href = `/?${Object.keys(query)
.map((key) => `${key}=${query[key]}`)
.join("&");
.join("&")}`;
router.push(href);
};
return (
<Link href={href} passHref>
<Button as="a" size="sm" color="black" css={{ marginRight: "1rem" }}>
{page}
</Button>
</Link>
<StyledPagination>
{totalPages > 1 && (
<ReactPaginate
initialPage={page - 1}
pageRangeDisplayed={4}
marginPagesDisplayed={2}
pageCount={totalPages}
onPageChange={handlePageChange}
previousLabel={<FaAngleDoubleLeft />}
nextLabel={<FaAngleDoubleRight />}
breakLabel={<FaEllipsisH />}
/>
)}
{totalItems ? <Box>{totalItems} total items</Box> : null}
</StyledPagination>
);
};
export const Pagination: React.FC<BoxProps & PaginationProps> = ({
page,
totalPages,
totalItems,
}) => (
<Box>
{page > 1 && <PaginationLink page={page - 1} />}
{!totalPages || (page + 1 <= totalPages && <PaginationLink page={page + 1} />)}
{totalItems ? <Box css={{ marginTop: "15px" }}>{totalItems} total items</Box> : null}
</Box>
);
const StyledPagination = styled(Box)`
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
li {
a {
display: inline-flex;
justify-content: center;
text-align: center;
padding: 10px 12px;
font-size: 16px;
font-weight: 600;
line-height: 100%;
height: 36px;
width: 36px;
outline: none;
margin: 0 8px 8px 0;
cursor: pointer;
outline: none;
}
&:not(.break) a {
color: #000;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
background-color: #8e8e8e;
&:hover,
&:focus {
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
}
}
&.selected a {
position: relative;
padding-top: 12px;
padding-bottom: 8px;
box-shadow: inset 0 10px 2px -8px #000, inset 0 9px 2px -8px #000,
inset 8px 0 4px -8px #563a10, inset 8px 0 4px -8px #563a10, inset -8px 0 4px -8px #563a10,
inset -8px 0 4px -8px #563a10, inset 0 9px 2px -8px #563a10, inset 0 -9px 2px -8px #563a10,
inset 0 -8.5px 0 -8px #563a10, 0 0 4px 0 #000;
background-color: #f1be64;
filter: none;
outline: 0;
}
&.disabled a,
&.disabled a:hover {
cursor: default;
filter: none;
background-color: #3d3d3d;
color: #818181;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
inset 0 -6px 4px -8px #818181, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
}
}
}
`;

38
apps/blueprints/src/components/Select.tsx
View File

@ -18,29 +18,33 @@ const StyledSelect = styled(MultiSelect)`
color: black;
&.rmsc {
.dropdown-container {
outline: none;
border: none;
border-radius: 0;
background-color: #8e8e8e;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
.gray {
color: #000 !important;
&:hover .dropdown-heading,
&:focus .dropdown-heading,
&[aria-expanded="true"] .dropdown-heading {
cursor: pointer;
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400,
0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
}
.dropdown-heading {
cursor: pointer;
border: none;
border-radius: 0;
background-color: #8e8e8e;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
&:hover {
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
.gray {
color: #000 !important;
}
}
}

2
package.json
View File

@ -61,6 +61,7 @@
"react-map-interaction": "file:.yalc/react-map-interaction",
"react-markdown": "5.0.3",
"react-multi-select-component": "4.0.0",
"react-paginate": "7.1.2",
"react-simplemde-editor": "4.1.3",
"sharp": "0.28.1",
"ws": "7.4.4"
@ -92,6 +93,7 @@
"@types/puppeteer": "5.4.3",
"@types/react": "17.0.3",
"@types/react-dom": "17.0.3",
"@types/react-paginate": "6.2.1",
"@types/sharp": "0.28.0",
"@types/ws": "7.4.1",
"@typescript-eslint/eslint-plugin": "4.21.0",

16
yarn.lock
View File

@ -4472,6 +4472,13 @@
dependencies:
"@types/react" "*"
"@types/react-paginate@6.2.1":
version "6.2.1"
resolved "https://registry.yarnpkg.com/@types/react-paginate/-/react-paginate-6.2.1.tgz#2329088d78010ea49661559c8467a24ecd942784"
integrity sha512-+q8k1N0WzbMyOCsIEH/p5D6/KQD8dXYLzfvSvriYn//94icd2sqhAL2rWXkgwGvqHGCSTU9AoHtsWCJxPfquUQ==
dependencies:
"@types/react" "*"
"@types/react@*":
version "16.9.52"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.52.tgz#c46c72d1a1d8d9d666f4dd2066c0e22600ccfde1"
@ -13630,7 +13637,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.4"
prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -13971,6 +13978,13 @@ react-multi-select-component@4.0.0:
resolved "https://registry.yarnpkg.com/react-multi-select-component/-/react-multi-select-component-4.0.0.tgz#51b68a79aec3b72e0dcb1d7947b9c71ba4aff77f"
integrity sha512-JcMoqy68KN8cSE7JopbLwVWXftkhBuHHwKtPCmkdQHFW8yyC+GaNxqmuStYJuNByPOIrwo+fj+Bin0GAQ0d1dA==
react-paginate@7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-7.1.2.tgz#3a94f36a774f9d2e82b877e30474a16088b00a4d"
integrity sha512-yAl7taPNIUegS5b6kdNvEMh7iu9T3spuzOCUw+BB0ScTLaC4dfSl686Kl+rVCvkOr67qcbi6T8+tpo4hEVCC1Q==
dependencies:
prop-types "^15.6.1"
react-refresh@0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"