From c66cca6511474f57f89832c65bdd3307e73e944d Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 10 Apr 2025 12:17:30 +0530
Subject: [PATCH] fix: AnimateEntry React.children.map wasn't working for some
reason
---
src/components/AnimateEntry.tsx | 56 +++++++++++++++++++++--------------------
src/components/Container.tsx | 3 ++-
src/util/index.ts | 9 -------
3 files changed, 31 insertions(+), 37 deletions(-)
diff --git a/src/components/AnimateEntry.tsx b/src/components/AnimateEntry.tsx
index bbcce2b..2dd9b71 100644
--- a/src/components/AnimateEntry.tsx
+++ b/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`
- & > * {
- animation: slideIn 300ms backwards;
- }
-
- ${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;
- }
- }
- `,
+ "animate-entry",
+ animationStyle,
className,
+ delayArray.map(
+ i =>
+ css`
+ & > *:nth-child(${i + 1}) {
+ animation-delay: ${i * delay}ms;
+ }
+ `,
+ ),
)}
{...props}
ref={ref}>
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index aaf0b2d..6549038 100644
--- a/src/components/Container.tsx
+++ b/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;
diff --git a/src/util/index.ts b/src/util/index.ts
index 1aad488..985e4e1 100644
--- a/src/util/index.ts
+++ b/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;