isuggest.selfce.st
alternative tangled frontend (extremely wip)
refactor: allow target on links
+12
-1
+3
src/components/Animated/UnderlineIconLink.tsx
+3
src/components/Animated/UnderlineIconLink.tsx
···
14
14
hover: { rotate: [0, -10, 10, -10, 10, 0] },
15
15
},
16
16
iconTransitions = { duration: 0.3, ease: "easeInOut" },
17
+
target = "_self",
17
18
}: {
18
19
href: string;
19
20
icon: ReactNode;
···
25
26
position?: "right" | "left";
26
27
iconVariants?: Variants;
27
28
iconTransitions?: Transition;
29
+
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
28
30
}) => {
29
31
const iconElement = (
30
32
<motion.div
···
42
44
className={`flex cursor-pointer items-center gap-1 pl-2 ${className}`}
43
45
initial="initial"
44
46
whileHover="hover"
47
+
target={target}
45
48
>
46
49
{position === "left" && iconElement}
47
50
<motion.div className="relative inline-block">
+3
src/components/Animated/UnderlineIconRouterLink.tsx
+3
src/components/Animated/UnderlineIconRouterLink.tsx
···
15
15
hover: { rotate: [0, -10, 10, -10, 10, 0] },
16
16
},
17
17
iconTransitions = { duration: 0.3, ease: "easeInOut" },
18
+
target = "_self",
18
19
}: {
19
20
to: string;
20
21
icon: ReactNode;
···
26
27
position?: "right" | "left";
27
28
iconVariants?: Variants;
28
29
iconTransitions?: Transition;
30
+
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
29
31
}) => {
30
32
const iconElement = (
31
33
<motion.div
···
42
44
<Link
43
45
to={to}
44
46
className={`flex cursor-pointer items-center gap-1 pl-2 ${className}`}
47
+
target={target}
45
48
>
46
49
{position === "left" && iconElement}
47
50
<motion.div className="relative inline-block">
+3
-1
src/components/Animated/UnderlineRouterLink.tsx
+3
-1
src/components/Animated/UnderlineRouterLink.tsx
···
7
7
children,
8
8
className = "text-[#cba6f7]",
9
9
underlineColor = "bg-[#cba6f7]",
10
+
target = "_self",
10
11
}: {
11
12
to: string;
12
13
children: ReactNode;
13
14
className?: string;
14
15
underlineColor?: string;
16
+
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
15
17
}) => {
16
18
return (
17
19
<motion.div
···
19
21
initial="initial"
20
22
whileHover="hover"
21
23
>
22
-
<Link to={to}>
24
+
<Link to={to} target={target}>
23
25
{children}
24
26
<motion.span
25
27
className={`absolute bottom-1 left-0 h-0.25 w-full origin-center ${underlineColor}`}
+3
src/components/Animated/UnderlinedLink.tsx
+3
src/components/Animated/UnderlinedLink.tsx
···
6
6
children,
7
7
className = "text-[#cba6f7]",
8
8
underlineColor = "bg-[#cba6f7]",
9
+
target = "_self",
9
10
}: {
10
11
href: string;
11
12
children: ReactNode;
12
13
className?: string;
13
14
underlineColor?: string;
15
+
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
14
16
}) => {
15
17
return (
16
18
<motion.a
···
18
20
className={`relative inline-block ${className}`}
19
21
initial="initial"
20
22
whileHover="hover"
23
+
target={target}
21
24
>
22
25
{children}
23
26
<motion.span