Skip to content

Commit 81495ae

Browse files
Abhijit-JhaAbhijit-Jha
committed
fixed: Comments by code rabbit
1 parent 5bdac0b commit 81495ae

33 files changed

Lines changed: 326 additions & 209 deletions

‎app/layout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import { CommandMenuProvider } from "@/components/command-menu-context";
99
import { TooltipProvider } from "@/components/ui/tooltip";
1010
import { LINKS } from "@/constants";
1111
import { Analytics } from "@vercel/analytics/react";
12-
import { StickyBanner } from "@/components/ui/sticky-banner";
1312
import { GithubStarsProvider } from "@/components/github-stars-context";
14-
import ExternalLinkIcon from "@/icons/external-link-icon";
15-
import Link from "next/link";
1613
import UmamiAnalytics from "@/components/UmamiAnalytics";
1714

1815
const geistSans = Geist({

‎icons/accessibility-icon.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle } from "react";
1+
import { forwardRef, useImperativeHandle, useRef } from "react";
22
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
33
import { motion, useAnimate } from "motion/react";
44

@@ -8,12 +8,18 @@ const AccessibilityIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
88
ref,
99
) => {
1010
const [scope, animate] = useAnimate();
11+
const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
1112

1213
const start = async () => {
13-
animate(
14-
".wheel",
15-
{ rotate: [0, 360] },
16-
{ duration: 1, ease: "easeInOut", repeat: Infinity },
14+
animationControls.current.forEach((control) => control.stop());
15+
animationControls.current = [];
16+
17+
animationControls.current.push(
18+
animate(
19+
".wheel",
20+
{ rotate: [0, 360] },
21+
{ duration: 1, ease: "easeInOut", repeat: Infinity },
22+
),
1723
);
1824
animate(
1925
".person",
@@ -23,6 +29,9 @@ const AccessibilityIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
2329
};
2430

2531
const stop = () => {
32+
animationControls.current.forEach((control) => control.stop());
33+
animationControls.current = [];
34+
2635
animate(".wheel", { rotate: 0 }, { duration: 0.3 });
2736
animate(".person", { y: 0 }, { duration: 0.2 });
2837
};

‎icons/alarm-clock-plus-icon.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle } from "react";
1+
import { forwardRef, useImperativeHandle, useRef } from "react";
22
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
33
import { motion, useAnimate } from "motion/react";
44

@@ -8,30 +8,38 @@ const AlarmClockPlusIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
88
ref,
99
) => {
1010
const [scope, animate] = useAnimate();
11+
const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
1112

1213
const start = async () => {
13-
animate(
14-
".clock",
15-
{
16-
y: -1.5,
17-
x: [-1, 1, -1, 1, -1, 0],
18-
},
19-
{
20-
y: { duration: 0.2, type: "spring", stiffness: 200, damping: 25 },
21-
x: { duration: 0.3, repeat: Infinity, ease: "linear" },
22-
},
14+
animationControls.current.forEach((control) => control.stop());
15+
animationControls.current = [];
16+
17+
animationControls.current.push(
18+
animate(
19+
".clock",
20+
{
21+
y: -1.5,
22+
x: [-1, 1, -1, 1, -1, 0],
23+
},
24+
{
25+
y: { duration: 0.2, type: "spring", stiffness: 200, damping: 25 },
26+
x: { duration: 0.3, repeat: Infinity, ease: "linear" },
27+
},
28+
),
2329
);
2430

25-
animate(
26-
".bells",
27-
{
28-
y: -2.5,
29-
x: [-2, 2, -2, 2, -2, 0],
30-
},
31-
{
32-
y: { duration: 0.2, type: "spring", stiffness: 200, damping: 25 },
33-
x: { duration: 0.3, repeat: Infinity, ease: "linear" },
34-
},
31+
animationControls.current.push(
32+
animate(
33+
".bells",
34+
{
35+
y: -2.5,
36+
x: [-2, 2, -2, 2, -2, 0],
37+
},
38+
{
39+
y: { duration: 0.2, type: "spring", stiffness: 200, damping: 25 },
40+
x: { duration: 0.3, repeat: Infinity, ease: "linear" },
41+
},
42+
),
3543
);
3644

3745
await animate(
@@ -42,6 +50,9 @@ const AlarmClockPlusIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
4250
};
4351

4452
const stop = () => {
53+
animationControls.current.forEach((control) => control.stop());
54+
animationControls.current = [];
55+
4556
animate(".clock", { y: 0, x: 0 }, { duration: 0.2 });
4657
animate(".bells", { y: 0, x: 0 }, { duration: 0.2 });
4758
};

‎icons/ambulance-icon.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle } from "react";
1+
import { forwardRef, useImperativeHandle, useRef } from "react";
22
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
33
import { motion, useAnimate } from "motion/react";
44

@@ -8,12 +8,18 @@ const AmbulanceIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
88
ref,
99
) => {
1010
const [scope, animate] = useAnimate();
11+
const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
1112

1213
const start = async () => {
13-
animate(
14-
".ambulance",
15-
{ x: [0, 1, 0, -1] },
16-
{ duration: 0.6, ease: "easeInOut", repeat: Infinity },
14+
animationControls.current.forEach((control) => control.stop());
15+
animationControls.current = [];
16+
17+
animationControls.current.push(
18+
animate(
19+
".ambulance",
20+
{ x: [0, 1, 0, -1] },
21+
{ duration: 0.6, ease: "easeInOut", repeat: Infinity },
22+
),
1723
);
1824
animate(
1925
".plus",
@@ -23,6 +29,9 @@ const AmbulanceIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
2329
};
2430

2531
const stop = () => {
32+
animationControls.current.forEach((control) => control.stop());
33+
animationControls.current = [];
34+
2635
animate(".ambulance", { x: 0 }, { duration: 0.2, ease: "easeInOut" });
2736
animate(".plus", { scale: 1 }, { duration: 0.2, ease: "easeInOut" });
2837
};

‎icons/brand-railway-icon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle, useCallback } from "react";
1+
import { forwardRef, useImperativeHandle } from "react";
22
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
33
import { motion, useAnimate } from "motion/react";
44

‎icons/brand-react-icon.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,24 @@ const BrandReactIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
2727
scale: [1.2, 1.35, 1.2],
2828
opacity: [1, 0.8, 1],
2929
},
30-
{ duration: 2, ease: "easeInOut", repeat: Infinity },
30+
{ duration: 2, ease: "easeInOut" },
3131
);
3232

3333
// Subtle breathing effect on all orbits
3434
animate(
3535
".orbit-1",
3636
{ scale: [1, 1.02, 1] },
37-
{ duration: 3, ease: "easeInOut", repeat: Infinity },
37+
{ duration: 3, ease: "easeInOut" },
3838
);
3939
animate(
4040
".orbit-2",
4141
{ scale: [1, 1.03, 1] },
42-
{ duration: 3.5, ease: "easeInOut", repeat: Infinity, delay: 0.5 },
42+
{ duration: 3.5, ease: "easeInOut", delay: 0.5 },
4343
);
4444
animate(
4545
".orbit-3",
4646
{ scale: [1, 1.02, 1] },
47-
{ duration: 4, ease: "easeInOut", repeat: Infinity, delay: 1 },
47+
{ duration: 4, ease: "easeInOut", delay: 1 },
4848
);
4949
};
5050

‎icons/brand-react-native-icon.tsx‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle } from "react";
1+
import { forwardRef, useImperativeHandle, useRef } from "react";
22
import { motion, useAnimate } from "motion/react";
33
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
44

@@ -8,8 +8,13 @@ const BrandReactNativeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
88
ref,
99
) => {
1010
const [scope, animate] = useAnimate();
11+
const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
1112

1213
const start = async () => {
14+
// Clear any existing animations
15+
animationControls.current.forEach((control) => control.stop());
16+
animationControls.current = [];
17+
1318
// Smooth pop entrance
1419
await animate(
1520
".orbit-system",
@@ -18,50 +23,60 @@ const BrandReactNativeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
1823
);
1924

2025
// Center dot gentle pulse
21-
animate(
22-
".center-dot",
23-
{
24-
scale: [1, 1.3, 1],
25-
opacity: [1, 0.8, 1],
26-
},
27-
{
28-
duration: 2.5,
29-
ease: "easeInOut",
30-
repeat: Infinity,
31-
},
26+
animationControls.current.push(
27+
animate(
28+
".center-dot",
29+
{
30+
scale: [1, 1.3, 1],
31+
opacity: [1, 0.8, 1],
32+
},
33+
{
34+
duration: 2.5,
35+
ease: "easeInOut",
36+
repeat: Infinity,
37+
},
38+
),
3239
);
3340

3441
// Smooth continuous rotation
35-
animate(
36-
".orbit-system",
37-
{ rotate: 360 },
38-
{
39-
duration: 20,
40-
ease: "linear",
41-
repeat: Infinity,
42-
},
42+
animationControls.current.push(
43+
animate(
44+
".orbit-system",
45+
{ rotate: 360 },
46+
{
47+
duration: 20,
48+
ease: "linear",
49+
repeat: Infinity,
50+
},
51+
),
4352
);
4453

4554
// Subtle wave through rings
4655
const rings = [".ring-1", ".ring-2", ".ring-3"];
4756
rings.forEach((ring, i) => {
48-
animate(
49-
ring,
50-
{
51-
opacity: [1, 0.7, 1],
52-
},
53-
{
54-
duration: 3,
55-
ease: "easeInOut",
56-
repeat: Infinity,
57-
delay: i * 1,
58-
},
57+
animationControls.current.push(
58+
animate(
59+
ring,
60+
{
61+
opacity: [1, 0.7, 1],
62+
},
63+
{
64+
duration: 3,
65+
ease: "easeInOut",
66+
repeat: Infinity,
67+
delay: i * 1,
68+
},
69+
),
5970
);
6071
});
6172
};
6273

63-
const stop = async () => {
64-
await animate(
74+
const stop = () => {
75+
// Cancel all infinite animations
76+
animationControls.current.forEach((control) => control.stop());
77+
animationControls.current = [];
78+
79+
animate(
6580
".orbit-system",
6681
{ rotate: 0, scale: 1 },
6782
{ duration: 0.6, ease: [0.34, 1.56, 0.64, 1] },

‎icons/brand-stripe-icon.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useImperativeHandle } from "react";
1+
import { forwardRef, useImperativeHandle, useId } from "react";
22
import { motion, useAnimate } from "motion/react";
33
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
44

@@ -8,6 +8,8 @@ const BrandStripeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
88
ref,
99
) => {
1010
const [scope, animate] = useAnimate();
11+
const id = useId();
12+
const clipId = `fillClip-${id.replace(/:/g, "")}`;
1113

1214
const start = async () => {
1315
await animate(
@@ -44,7 +46,7 @@ const BrandStripeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
4446
className={`cursor-pointer select-none ${className}`}
4547
>
4648
<defs>
47-
<clipPath id="fillClip">
49+
<clipPath id={clipId}>
4850
<motion.rect
4951
className="fill-rect"
5052
x="0"
@@ -68,7 +70,7 @@ const BrandStripeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6870
d="M11.453 8.056c0 -.623 .518 -.979 1.442 -.979c1.69 0 3.41 .343 4.605 .923l.5 -4c-.948 -.449 -2.82 -1 -5.5 -1c-1.895 0 -3.373 .087 -4.5 1c-1.172 .956 -2 2.33 -2 4c0 3.03 1.958 4.906 5 6c1.961 .69 3 .743 3 1.5c0 .735 -.851 1.5 -2 1.5c-1.423 0 -3.963 -.609 -5.5 -1.5l-.5 4c1.321 .734 3.474 1.5 6 1.5c2 0 3.957 -.468 5.084 -1.36c1.263 -.979 1.916 -2.268 1.916 -4.14c0 -3.096 -1.915 -4.547 -5 -5.637c-1.646 -.605 -2.544 -1.07 -2.544 -1.807l-.003 0"
6971
fill={color}
7072
stroke="none"
71-
clipPath="url(#fillClip)"
73+
clipPath={`url(#${clipId})`}
7274
opacity="0.5"
7375
/>
7476
</motion.svg>

‎icons/brand-threads-icon.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const BrandThreadsIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
1212
const start = async () => {
1313
// Reset
1414
animate(scope.current, { scale: 1, rotate: 0 });
15-
animate("path", { pathLength: 1, opacity: 1 });
15+
animate(".animated-path", { pathLength: 1, opacity: 1 });
1616

1717
// Animation
1818
animate(
19-
"path",
19+
".animated-path",
2020
{ pathLength: [0, 1], opacity: [0, 1] },
2121
{ duration: 1, ease: "easeInOut" },
2222
);
@@ -36,7 +36,7 @@ const BrandThreadsIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
3636

3737
const stop = () => {
3838
animate(scope.current, { scale: 1, rotate: 0 });
39-
animate("path", { pathLength: 1, opacity: 1 });
39+
animate(".animated-path", { pathLength: 1, opacity: 1 });
4040
};
4141

4242
useImperativeHandle(ref, () => {
@@ -71,7 +71,10 @@ const BrandThreadsIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
7171
className={`cursor-pointer ${className}`}
7272
>
7373
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
74-
<motion.path d="M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7 -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1" />
74+
<motion.path
75+
className="animated-path"
76+
d="M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7 -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
77+
/>
7578
</motion.svg>
7679
);
7780
},

0 commit comments

Comments
 (0)