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