isuggest.selfce.st
alternative tangled frontend (extremely wip)
refactor: abstract component
+93
-68
+66
src/components/Animated/UnderlineIconRouterLink.tsx
+66
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,
7
+
icon,
8
+
label,
9
+
className,
10
+
iconClassName = "text-[#cba6f7]",
11
+
labelClassName = "text-[#cba6f7]",
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
+
}: {
19
+
to: string;
20
+
icon: ReactNode;
21
+
label: string;
22
+
className?: string;
23
+
iconClassName?: string;
24
+
labelClassName?: string;
25
+
underlineClassName?: string;
26
+
position?: "right" | "left";
27
+
iconVariants?: Variants;
28
+
iconTransitions?: Transition;
29
+
}) => {
30
+
const iconElement = (
31
+
<motion.div
32
+
variants={iconVariants}
33
+
transition={iconTransitions}
34
+
className={iconClassName}
35
+
>
36
+
{icon}
37
+
</motion.div>
38
+
);
39
+
40
+
return (
41
+
<motion.div initial="initial" whileHover="hover">
42
+
<Link
43
+
to={to}
44
+
className={`flex cursor-pointer items-center gap-1 pl-2 ${className}`}
45
+
>
46
+
{position === "left" && iconElement}
47
+
<motion.div className="relative inline-block">
48
+
<p className={labelClassName}>{label}</p>
49
+
<motion.span
50
+
className={`absolute bottom-1 left-0 h-0.25 w-full origin-center ${underlineClassName}`}
51
+
variants={{
52
+
initial: { scaleX: 0 },
53
+
hover: { scaleX: 1 },
54
+
}}
55
+
transition={{
56
+
type: "spring",
57
+
duration: 0.2,
58
+
bounce: 0.3,
59
+
}}
60
+
/>
61
+
</motion.div>
62
+
{position === "right" && iconElement}
63
+
</Link>
64
+
</motion.div>
65
+
);
66
+
};