fix: AnimateEntry React.children.map wasn't working for some reason

src/components/AnimateEntry.tsx

@@ -1,6 +1,25 @@
 import React, { forwardRef } from "react";
 import { css, cx } from "@emotion/css";
 
+const animationStyle = css`
+	& > * {
+		animation: slideIn 300ms backwards;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			translate: 0 3rem;
+		}
+		to {
+			opacity: 1;
+			translate: 0 0;
+		}
+	}
+`;
+
+const delayArray = Array.from({ length: 20 }, (_, i) => i);
+
 export interface AnimateEntryProps extends React.HTMLAttributes<any> {
 	as?: React.ElementType;
 	delay?: number;
@@ -14,34 +33,17 @@ export const AnimateEntry = forwardRef<HTMLDivElement, AnimateEntryProps>(
 		return (
 			<Component
 				className={cx(
-					css`
+					"animate-entry",
-						& > * {
+					animationStyle,
-							animation: slideIn 300ms backwards;
+					className,
-						}
+					delayArray.map(
-
+						i =>
-						${React.Children.map(
-							children,
-							(child, i) =>
-								child &&
 							css`
 								& > *:nth-child(${i + 1}) {
 									animation-delay: ${i * delay}ms;
 								}
 							`,
-						)}
+					),
-
-						@keyframes slideIn {
-							from {
-								opacity: 0;
-								translate: 0 3rem;
-							}
-							to {
-								opacity: 1;
-								translate: 0 0;
-							}
-						}
-					`,
-					className,
 				)}
 				{...props}
 				ref={ref}>

src/components/Container.tsx

@@ -4,7 +4,7 @@ import useLocation from "wouter/use-location";
 
 import { ReactComponent as Logo } from "../assets/logo.svg";
 import { ReactComponent as Right } from "../assets/arrow-right.svg";
-import { get, getTimeout } from "../util";
+import { getTimeout } from "../util";
 import Menu, { MenuEntries, MenuPaths } from "./Menu";
 import useMediaQuery from "../util/useMediaQuery";
 import { AnimateEntry } from "./AnimateEntry";
@@ -281,6 +281,7 @@ const Container: React.FC<{
 			<AnimateEntry
 				delay={delay}
 				className={cx(
+					"container",
 					css`
 						width: 100%;
 						max-width: 62rem;

src/util/index.ts

@@ -123,15 +123,6 @@ export function comparePaths(p1: string, p2: string) {
 	return normalise(p1) === normalise(p2);
 }
 
-export const get = {
-	next<X>(xs: X[], i: number) {
-		return xs.at((i + 1) % xs.length)!;
-	},
-	prev<X>(xs: X[], i: number) {
-		return xs.at((i - 1) % xs.length)!;
-	},
-};
-
 // required css is inlined in index.html
 export function setupCursorTracking(el: HTMLElement | null) {
 	if (!el) return;