isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: tabs
-1
src/components/Profile/ProfileOverview.tsx
-1
src/components/Profile/ProfileOverview.tsx
+13
-18
src/routes/_layout/$identifier/index.tsx
+13
-18
src/routes/_layout/$identifier/index.tsx
···
1
1
import { createFileRoute } from "@tanstack/react-router";
2
-
import { LucideBookOpen } from "lucide-react";
2
+
import { LucideBookMarked, LucideBookOpen, LucideStar } from "lucide-react";
3
3
import type { ReactNode } from "react";
4
4
import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
5
5
import { z } from "zod/v4";
···
33
33
isCurrent: currTab === "overview",
34
34
},
35
35
{
36
-
to: `/${identifier}`,
37
-
icon: <LucideBookOpen height={18} width={18} />,
38
-
label: "Overview",
39
-
isCurrent: currTab === "strings",
36
+
to: `/${identifier}?tab=repos`,
37
+
icon: <LucideBookMarked height={18} width={18} />,
38
+
label: "Repos",
39
+
isCurrent: currTab === "repos",
40
40
},
41
41
{
42
-
to: `/${identifier}`,
43
-
icon: <LucideBookOpen height={18} width={18} />,
44
-
label: "Overview",
45
-
isCurrent: currTab === "strings",
46
-
},
47
-
{
48
-
to: `/${identifier}`,
49
-
icon: <LucideBookOpen height={18} width={18} />,
50
-
label: "Overview",
51
-
isCurrent: currTab === "strings",
42
+
to: `/${identifier}?tab=starred`,
43
+
icon: <LucideStar height={18} width={18} />,
44
+
label: "Starred",
45
+
isCurrent: currTab === "starred",
52
46
},
53
47
];
54
48
···
64
58
65
59
return (
66
60
<div className="flex flex-col items-center">
67
-
<div className="bg-base flex w-screen pl-4 gap-2">
61
+
<div className="bg-base flex w-screen gap-1 pl-4">
68
62
{tabs.map(({ to, icon, label, isCurrent }) => (
69
63
<UnderlineIconRouterLink
64
+
key={to}
70
65
to={to}
71
66
icon={icon}
72
67
label={label}
···
74
69
labelClassName={`text-text ${isCurrent ? "font-semibold" : ""}`}
75
70
iconClassName="text-text"
76
71
iconVariants={{}}
77
-
className={`hover:bg-surface1 rounded-t-lg p-2 px-4 transition-all ${isCurrent ? "bg-surface0" : ""}`}
72
+
className={`hover:bg-surface1 rounded-t-lg p-2.5 px-3 transition-all ${isCurrent ? "bg-surface0" : ""}`}
78
73
/>
79
74
))}
80
75
</div>
81
-
<div className="bg-surface0 min-h-screen w-full">
76
+
<div className="bg-surface0 flex min-h-screen w-full flex-col items-center">
82
77
{tabComponent}
83
78
</div>
84
79
</div>