isuggest.selfce.st
alternative tangled frontend (extremely wip)
refactor: redo animation
+14
-4
src/components/Animated/UnderlineIconRouterLink.tsx
+14
-4
src/components/Animated/UnderlineIconRouterLink.tsx
···
1
import { Link } from "@tanstack/react-router";
2
import { motion, Transition, Variants } from "motion/react";
3
-
import { ReactNode } from "react";
4
5
export const UnderlineIconRouterLink = ({
6
to,
···
12
underlineClassName = "bg-[#cba6f7]",
13
position = "left",
14
iconVariants = {
15
-
hover: { rotate: [0, -10, 10, -10, 10, 0] },
16
},
17
-
iconTransitions = { duration: 0.3, ease: "easeInOut" },
18
target = "_self",
19
}: {
20
to: string;
···
29
iconTransitions?: Transition;
30
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
31
}) => {
32
const iconElement = (
33
<motion.div
34
variants={iconVariants}
35
transition={iconTransitions}
36
className={iconClassName}
37
>
38
{icon}
39
</motion.div>
40
);
41
42
return (
43
-
<motion.div initial="initial" whileHover="hover">
44
<Link
45
to={to}
46
className={`flex cursor-pointer items-center gap-1 ${className}`}
···
1
import { Link } from "@tanstack/react-router";
2
import { motion, Transition, Variants } from "motion/react";
3
+
import { ReactNode, useState } from "react";
4
5
export const UnderlineIconRouterLink = ({
6
to,
···
12
underlineClassName = "bg-[#cba6f7]",
13
position = "left",
14
iconVariants = {
15
+
rest: { rotate: 0 },
16
+
wiggle: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
17
},
18
+
iconTransitions = { duration: 0.25, ease: "easeInOut" },
19
target = "_self",
20
}: {
21
to: string;
···
30
iconTransitions?: Transition;
31
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
32
}) => {
33
+
const [isIconWiggle, setIsIconWiggle] = useState(false);
34
+
35
const iconElement = (
36
<motion.div
37
variants={iconVariants}
38
+
initial="rest"
39
transition={iconTransitions}
40
className={iconClassName}
41
+
animate={isIconWiggle ? "wiggle" : "rest"}
42
>
43
{icon}
44
</motion.div>
45
);
46
47
return (
48
+
<motion.div
49
+
initial="initial"
50
+
whileHover="hover"
51
+
onHoverStart={() => setIsIconWiggle(true)}
52
+
onAnimationComplete={() => setIsIconWiggle(false)}
53
+
>
54
<Link
55
to={to}
56
className={`flex cursor-pointer items-center gap-1 ${className}`}