isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: change cta
+2
-2
src/components/Animated/UnderlineIconRouterLink.tsx
+2
-2
src/components/Animated/UnderlineIconRouterLink.tsx
···
13
13
position = "left",
14
14
iconVariants = {
15
15
rest: { rotate: 0 },
16
-
wiggle: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
16
+
active: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
17
17
},
18
18
iconTransitions = { duration: 0.25, ease: "easeInOut" },
19
19
target = "_self",
···
38
38
initial="rest"
39
39
transition={iconTransitions}
40
40
className={iconClassName}
41
-
animate={isIconWiggle ? "wiggle" : "rest"}
41
+
animate={isIconWiggle ? "active" : "rest"}
42
42
>
43
43
{icon}
44
44
</motion.div>
+2
-2
src/components/Homepage/TrendingFeed.tsx
+2
-2
src/components/Homepage/TrendingFeed.tsx
···
98
98
/>
99
99
<p className="text-subtext max-w-164">{repoDesc}</p>
100
100
</div>
101
-
<button className="flex items-center gap-1">
102
-
<LucideStar />
101
+
<button className="bg-surface1 border-overlay0 group flex cursor-pointer items-center gap-1 rounded-sm border p-1 transition-all">
102
+
<LucideStar className="group-hover:text-accent-alt transition-all" />
103
103
<p>{starCount}</p>
104
104
</button>
105
105
</div>
+21
-6
src/routes/_layout/index.tsx
+21
-6
src/routes/_layout/index.tsx
···
1
+
import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
1
2
import { TrendingFeed } from "@/components/Homepage/TrendingFeed";
2
3
import { Loading } from "@/components/Icons/Loading";
4
+
import { LucideLogIn } from "@/components/Icons/LucideLogIn";
3
5
import { NavBarUnauthed } from "@/components/Nav/NavBarUnauthed";
4
6
import { useOAuth } from "@/lib/oauth";
5
7
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
···
28
30
}
29
31
30
32
return (
31
-
<div className="flex flex-col items-center justify-center gap-4 pt-4">
33
+
<div className="flex flex-col items-center justify-center gap-4 pt-8">
32
34
<h1 className="text-xl font-bold">
33
35
The better frontend for the better forge.
34
36
</h1>
35
-
<Link
37
+
<UnderlineIconRouterLink
36
38
to="/login"
37
-
className="hover:bg-overlay0 bg-surface0 text-text rounded-xs p-2 transition-all"
38
-
>
39
-
Sign in
40
-
</Link>
39
+
label="Sign In"
40
+
icon={LucideLogIn({})}
41
+
iconClassName="text-crust"
42
+
labelClassName="text-crust"
43
+
underlineClassName="bg-crust"
44
+
className="bg-accent rounded-sm p-1.5 pr-3 pl-3"
45
+
position="right"
46
+
iconTransitions={{ duration: 0.2, ease: "easeInOut" }}
47
+
iconVariants={{
48
+
active: {
49
+
x: [0, 10, -10, 0],
50
+
opacity: [1, 0, 0, 1],
51
+
},
52
+
}}
53
+
/>
54
+
<div className="bg-surface1 h-0.5 w-full mt-6" />
55
+
<TrendingFeed />
41
56
</div>
42
57
);
43
58
};