xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-17 06:11:10 -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

2
src/components/BoxLoop.tsx
View File

@@ -39,7 +39,7 @@ const BoxLoop: FunctionComponent<BoxLoopProps> = ({count}: BoxLoopProps) => {
return createLoop([1, 100], 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))`}}>
{list.map((v, index) => {
const [sourceKey, destinationKey] = [`x-${v}`, `x-${loop[v]}`];

10
src/utils/helpers.ts
View File

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