isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: redo colours
+22
-8
src/routes/_layout/$identifier/index.tsx
+22
-8
src/routes/_layout/$identifier/index.tsx
···
5
5
import { useProfileQuery } from "@/lib/queries/get-profile";
6
6
import { useMiniDoc } from "@/lib/queries/resolve-minidoc";
7
7
import { createFileRoute } from "@tanstack/react-router";
8
-
import { LucideAlignCenter, LucideHeart } from "lucide-react";
8
+
import { LucideBookOpen } from "lucide-react";
9
+
import { ReactNode } from "react";
9
10
10
11
export const Route = createFileRoute("/_layout/$identifier/")({
11
12
component: RouteComponent,
···
49
50
50
51
const avatarUri = avatarQueryData;
51
52
52
-
const tempIcon = <LucideHeart/>
53
+
const tabs: { to: string; icon: ReactNode; label: string }[] = [
54
+
{
55
+
to: `/${identifier}`,
56
+
icon: <LucideBookOpen height={18} width={18} />,
57
+
label: "Overview",
58
+
},
59
+
];
53
60
54
61
return (
55
62
<div className="flex flex-col items-center">
56
-
<div className="bg-surface0 w-screen">
57
-
<UnderlineIconRouterLink
58
-
to={`/${identifier}`}
59
-
icon={tempIcon}
60
-
label="Temporary"
61
-
/>
63
+
<div className="bg-base w-screen flex pl-4 pb-1">
64
+
{tabs.map(({ to, icon, label }) => (
65
+
<UnderlineIconRouterLink
66
+
to={to}
67
+
icon={icon}
68
+
label={label}
69
+
underlineClassName="bg-text"
70
+
labelClassName="text-text"
71
+
iconClassName="text-text"
72
+
iconVariants={{}}
73
+
className="hover:bg-surface1 p-2 transition-all"
74
+
/>
75
+
))}
62
76
</div>
63
77
<div className="bg-surface0 w-fit">
64
78
<p>{JSON.stringify(miniDocQueryData)}</p>
+5
-5
src/routes/_layout/index.tsx
+5
-5
src/routes/_layout/index.tsx
···
4
4
import { useOAuth } from "@/lib/oauth";
5
5
import { useAvatarQuery } from "@/lib/queries/get-avatar";
6
6
import { createFileRoute } from "@tanstack/react-router";
7
-
import { LucideLogIn } from "lucide-react";
7
+
import { LucideDot, LucideLogIn } from "lucide-react";
8
8
9
9
export const Route = createFileRoute("/_layout/")({ component: App });
10
10
11
11
function App() {
12
12
return (
13
-
<div className="flex min-w-screen flex-col items-center justify-center gap-4">
13
+
<div className="border-overlay0 flex min-w-screen flex-col items-center justify-center gap-4 border-t pt-8">
14
14
<IndexInner />
15
15
</div>
16
16
);
···
31
31
32
32
if (client && session) {
33
33
return (
34
-
<div className="flex flex-col items-start gap-4 pt-8">
34
+
<div className="border-overlay0 flex flex-col items-start gap-4">
35
35
<div className="flex items-center gap-4 pl-2">
36
36
<img src={avatarSrc} className="h-20 w-20 rounded-full" />
37
37
<div>
···
47
47
}
48
48
49
49
return (
50
-
<div className="flex flex-col items-center justify-center gap-4 pt-8">
50
+
<div className="border-overlay0 flex flex-col items-center justify-center gap-4">
51
51
<h1 className="text-xl font-bold">
52
52
The better frontend for the better forge.
53
53
</h1>
···
68
68
},
69
69
}}
70
70
/>
71
-
<div className="border-surface1 mt-6 h-0.5 w-full border-b-1" />
71
+
<LucideDot height={20} width={20} className="text-overlay0 mt-2" />
72
72
<TrendingFeed />
73
73
</div>
74
74
);
+1
-1
src/routes/_layout/login.tsx
+1
-1
src/routes/_layout/login.tsx
+3
-1
src/routes/_layout/oauth/callback.tsx
+3
-1
src/routes/_layout/oauth/callback.tsx
···
1
1
import { Loading } from "@/components/Icons/Loading";
2
2
import { useOAuthSession } from "@/lib/oauth";
3
-
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
3
+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
4
4
import { useEffect } from "react";
5
5
6
6
export const Route = createFileRoute("/_layout/oauth/callback")({
···
23
23
return (
24
24
<div>
25
25
<p>Signed in as {session.did}</p>
26
+
<p>Wow your oauth callback is taking a while isn't it?</p>
27
+
<p>omg easter egg??</p>
26
28
</div>
27
29
);
28
30
}