xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-06 09:14:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic box count with useTailwindBreakpoint hook, adjust BoxLoop padding

Browse Source
This commit is contained in:
Xevion
2022-12-18 18:07:05 -06:00
parent eb63f0b3fd
commit feae300fdd
4 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.13", "@heroicons/react": "^2.0.13",
"@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
"@tanstack/react-query": "^4.16.0", "@tanstack/react-query": "^4.16.0",
"@trpc/client": "^10.0.0", "@trpc/client": "^10.0.0",
"@trpc/next": "^10.0.0", "@trpc/next": "^10.0.0",

2
src/components/BoxLoop.tsx
View File

@@ -39,7 +39,7 @@ const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
return createLoop([1, 100], count)!; return createLoop([1, 100], count)!;
}, [count]) }, [count])
return <div className="grid gap-x-10 pb-0" return <div className="grid gap-x-10"
style={{gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`}}> style={{gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`}}>
{list.map((v, index) => { {list.map((v, index) => {
const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`]; const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`];

10
src/utils/helpers.ts
View File

@@ -1,4 +1,8 @@
import Chance from "chance"; import Chance from "chance";
import create from "@kodingdotninja/use-tailwind-breakpoint";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "./../../tailwind.config.cjs";
const colors = [ const colors = [
"#EF4444", "#EF4444",
@@ -34,4 +38,8 @@ export function sum(a: number, b: number): number {
export function getColor(seed: number) { export function getColor(seed: number) {
const chance = Chance(seed); const chance = Chance(seed);
return chance.pickone(colors); return chance.pickone(colors);
} }
const config = resolveConfig(tailwindConfig);
export const {useBreakpoint, useBreakpointValue} = create(config.theme!.screens);

5
yarn.lock
View File

@@ -56,6 +56,11 @@
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
"@kodingdotninja/use-tailwind-breakpoint@^0.0.5":
version "0.0.5"
resolved "https://registry.yarnpkg.com/@kodingdotninja/use-tailwind-breakpoint/-/use-tailwind-breakpoint-0.0.5.tgz#f3319448c33572e2e810700e6f2c4e219cf3b54a"
integrity sha512-7h52zL+l+14u9diyjVcGoS5NRIwrc6euIGlHDwtJXlrR3h31RNyTrOfimy7PJTvS4fFdNgbzyrNcGfhj3sDRfQ==
"@next/env@13.0.2": "@next/env@13.0.2":
version "13.0.2" version "13.0.2"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d"