Dynamic box count with useTailwindBreakpoint hook, adjust BoxLoop padding

package.json

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

src/components/BoxLoop.tsx

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

src/utils/helpers.ts

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

yarn.lock

@@ -56,6 +56,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   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":
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d"