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
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",
···
38
initial="rest"
39
transition={iconTransitions}
40
className={iconClassName}
41
-
animate={isIconWiggle ? "wiggle" : "rest"}
42
>
43
{icon}
44
</motion.div>
···
13
position = "left",
14
iconVariants = {
15
rest: { rotate: 0 },
16
+
active: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
17
},
18
iconTransitions = { duration: 0.25, ease: "easeInOut" },
19
target = "_self",
···
38
initial="rest"
39
transition={iconTransitions}
40
className={iconClassName}
41
+
animate={isIconWiggle ? "active" : "rest"}
42
>
43
{icon}
44
</motion.div>
+2
-2
src/components/Homepage/TrendingFeed.tsx
+2
-2
src/components/Homepage/TrendingFeed.tsx
···
98
/>
99
<p className="text-subtext max-w-164">{repoDesc}</p>
100
</div>
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
<p>{starCount}</p>
104
</button>
105
</div>
+21
-6
src/routes/_layout/index.tsx
+21
-6
src/routes/_layout/index.tsx
···
1
import { TrendingFeed } from "@/components/Homepage/TrendingFeed";
2
import { Loading } from "@/components/Icons/Loading";
3
import { NavBarUnauthed } from "@/components/Nav/NavBarUnauthed";
4
import { useOAuth } from "@/lib/oauth";
5
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
···
28
}
29
30
return (
31
-
<div className="flex flex-col items-center justify-center gap-4 pt-4">
32
<h1 className="text-xl font-bold">
33
The better frontend for the better forge.
34
</h1>
35
-
<Link
36
to="/login"
37
-
className="hover:bg-overlay0 bg-surface0 text-text rounded-xs p-2 transition-all"
38
-
>
39
-
Sign in
40
-
</Link>
41
</div>
42
);
43
};
···
1
+
import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
2
import { TrendingFeed } from "@/components/Homepage/TrendingFeed";
3
import { Loading } from "@/components/Icons/Loading";
4
+
import { LucideLogIn } from "@/components/Icons/LucideLogIn";
5
import { NavBarUnauthed } from "@/components/Nav/NavBarUnauthed";
6
import { useOAuth } from "@/lib/oauth";
7
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
···
30
}
31
32
return (
33
+
<div className="flex flex-col items-center justify-center gap-4 pt-8">
34
<h1 className="text-xl font-bold">
35
The better frontend for the better forge.
36
</h1>
37
+
<UnderlineIconRouterLink
38
to="/login"
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 />
56
</div>
57
);
58
};