Skip to content

Commit bceb356

Browse files
kumaryash90kumaryash90
authored
Merge branch 'main' into yash/zksync-stack-check
2 parents 3b793d5 + fd8674a commit bceb356

File tree

15 files changed

+311
-509
lines changed

15 files changed

+311
-509
lines changed

‎apps/dashboard/src/@/components/ui/tabs.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ function useUnderline<El extends HTMLElement>() {
165165
block: "nearest",
166166
inline: "center",
167167
});
168+
} else if (lineRef.current) {
169+
lineRef.current.style.width = "0px";
168170
}
169171
}
170172

‎apps/dashboard/src/app/(dashboard)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AppFooter } from "@/components/blocks/app-footer";
2-
import { DashboardHeader } from "app/components/Header/DashboardHeader";
32
import { ErrorProvider } from "../../contexts/error-handler";
3+
import { DashboardHeader } from "../components/Header/DashboardHeader";
44

55
export default function DashboardLayout(props: { children: React.ReactNode }) {
66
return (

‎apps/dashboard/src/app/components/Header/DashboardHeader.tsx‎

Lines changed: 86 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,101 @@
1-
import { ColorModeToggle } from "@/components/color-mode-toggle";
2-
import { Spinner } from "@/components/ui/Spinner/Spinner";
1+
import { NavLink } from "@/components/ui/NavLink";
2+
import { Button } from "@/components/ui/button";
33
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
4-
import { ClientOnly } from "components/ClientOnly/ClientOnly";
4+
import { CmdKSearch } from "components/cmd-k-search";
5+
import { ColorModeToggle } from "components/color-mode/color-mode-toggle";
6+
import { Logo } from "components/logo";
7+
import { CreditsButton } from "components/settings/Account/Billing/CreditsButton";
8+
import { UpgradeButton } from "components/settings/Account/Billing/UpgradeButton";
9+
import { CircleHelpIcon } from "lucide-react";
510
import Link from "next/link";
6-
import { ThirdwebMiniLogo } from "../ThirdwebMiniLogo";
7-
import { NavLink } from "../nav-link.client";
8-
import { MobileBurgerMenu } from "./MobileBurgerMenu";
9-
import { headerLinks } from "./headerLinks";
11+
import { Suspense } from "react";
12+
import { DashboardHeaderTabs } from "./DashboardHeaderTabs";
1013

11-
export function DashboardHeader() {
14+
export const DashboardHeader: React.FC = () => {
1215
return (
13-
// the "h-24" avoids layout shift when connecting wallet (connected wallet button is taller than disconnected...)
14-
<header className="flex h-20 flex-shrink-0 flex-row items-center justify-between border-border border-b bg-muted/50 px-4 py-4 md:h-20 lg:px-6">
15-
{/* Left */}
16-
<div className="flex items-center gap-6">
17-
<div className="flex items-center gap-2">
18-
<MobileBurgerMenu />
16+
<div className="bg-muted/50">
17+
<header className="flex items-center justify-between px-4 py-3 lg:px-6">
18+
{/* left */}
19+
<div className="flex items-center gap-4">
1920
<Link href="/dashboard">
20-
<ThirdwebMiniLogo className="h-6" />
21+
<Logo hideWordmark />
2122
</Link>
23+
<CmdKSearch />
2224
</div>
2325

24-
<div className="hidden items-center gap-2 md:flex">
25-
{headerLinks.left.map((link) => (
26-
<NavLink
27-
key={link.href}
28-
href={link.href}
29-
target={link.href.startsWith("https") ? "_blank" : undefined}
30-
className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
31-
activeClassName="font-medium text-foreground"
32-
>
33-
{link.name}
34-
</NavLink>
35-
))}
36-
</div>
37-
</div>
38-
{/* Right */}
39-
<div className="flex items-center gap-4">
40-
<div className="items-center gap-2 lg:flex">
41-
<div className="hidden items-center gap-2 lg:flex">
42-
{headerLinks.right.map((link) => (
43-
<Link
44-
key={link.href}
45-
href={link.href}
46-
target={link.href.startsWith("https") ? "_blank" : undefined}
47-
className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
26+
{/* Right */}
27+
<div className="flex items-center gap-2">
28+
<div className="hidden gap-2 md:flex">
29+
<Suspense fallback={null}>
30+
<CreditsButton />
31+
</Suspense>
32+
<UpgradeButton />
33+
</div>
34+
35+
<HeaderNavLink
36+
trackingLabel="chainlist"
37+
href="/chainlist"
38+
label="Chainlist"
39+
/>
40+
41+
<HeaderNavLink
42+
trackingLabel="docs"
43+
href="https://portal.thirdweb.com"
44+
label="Docs"
45+
/>
46+
47+
<HeaderNavLink
48+
trackingLabel="support"
49+
href="/support"
50+
label="Support"
51+
/>
52+
53+
<div className="md:hidden">
54+
<Button asChild variant="ghost">
55+
<NavLink
56+
className="fade-in-0 !h-auto !w-auto p-2"
57+
href="/support"
58+
tracking={{
59+
category: "header",
60+
action: "click",
61+
label: "support",
62+
}}
4863
>
49-
{link.name}
50-
</Link>
51-
))}
64+
<CircleHelpIcon className="size-5" />
65+
</NavLink>
66+
</Button>
5267
</div>
68+
5369
<ColorModeToggle />
70+
71+
<div className="md:ml-2">
72+
<CustomConnectWallet />
73+
</div>
5474
</div>
75+
</header>
5576

56-
<ClientOnly
57-
ssr={
58-
<div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border bg-muted/50">
59-
<Spinner className="size-4" />
60-
</div>
61-
}
62-
>
63-
<CustomConnectWallet />
64-
</ClientOnly>
65-
</div>
66-
</header>
77+
<DashboardHeaderTabs />
78+
</div>
79+
);
80+
};
81+
82+
function HeaderNavLink(props: {
83+
label: string;
84+
trackingLabel: string;
85+
href: string;
86+
}) {
87+
return (
88+
<NavLink
89+
href={props.href}
90+
tracking={{
91+
category: "header",
92+
action: "click",
93+
label: props.trackingLabel,
94+
}}
95+
className="hidden px-2.5 text-muted-foreground text-sm hover:text-foreground md:block"
96+
activeClassName="text-foreground"
97+
>
98+
{props.label}
99+
</NavLink>
67100
);
68101
}

‎apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"use client";
2+
3+
import { TabLinks } from "@/components/ui/tabs";
4+
import { usePathname } from "next/navigation";
5+
6+
export function DashboardHeaderTabs() {
7+
const pathname = usePathname() || "";
8+
return (
9+
<TabLinks
10+
className="w-full"
11+
tabContainerClassName="px-4"
12+
shadowColor="transparent"
13+
links={[
14+
{
15+
href: "/dashboard",
16+
name: "Home",
17+
isActive: pathname === "/dashboard",
18+
},
19+
{
20+
href: "/dashboard/connect/analytics",
21+
name: "Connect",
22+
isActive: pathname.startsWith("/dashboard/connect"),
23+
},
24+
{
25+
href: "/dashboard/contracts/deploy",
26+
name: "Contracts",
27+
isActive: pathname.startsWith("/dashboard/contracts"),
28+
},
29+
{
30+
href: "/dashboard/engine",
31+
name: "Engine",
32+
isActive: pathname.startsWith("/dashboard/engine"),
33+
},
34+
{
35+
href: "/dashboard/settings/api-keys",
36+
name: "Settings",
37+
isActive: pathname.startsWith("/dashboard/settings"),
38+
},
39+
]}
40+
/>
41+
);
42+
}

‎apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎apps/dashboard/src/app/components/Header/headerLinks.ts‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎apps/dashboard/src/app/components/nav-link.client.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎apps/dashboard/src/components/cmd-k-search/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,12 +290,12 @@ export const CmdKSearch: React.FC = () => {
290290
</div>
291291

292292
<Button
293-
className="p-2 lg:hidden"
293+
className="!h-auto !w-auto p-2 lg:hidden"
294294
aria-label="Search any contract"
295295
variant="ghost"
296296
onClick={() => setOpen(true)}
297297
>
298-
<SearchIcon className="size-4" />
298+
<SearchIcon className="size-5" />
299299
</Button>
300300

301301
<CmdKSearchModal open={open} setOpen={setOpen} />

‎apps/dashboard/src/components/color-mode/color-mode-toggle.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { Button } from "@/components/ui/button";
24
import { SkeletonContainer } from "@/components/ui/skeleton";
35
import { useTheme } from "next-themes";
@@ -21,15 +23,15 @@ export const ColorModeToggle: React.FC = () => {
2123
render={(v) => {
2224
return (
2325
<Button
24-
className="fade-in-0 p-2 md:p-3"
26+
className="fade-in-0 !h-auto !w-auto p-2 text-muted-foreground hover:text-foreground"
2527
variant="ghost"
2628
aria-label="toggle color"
2729
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
2830
>
2931
{v === "dark" ? (
30-
<FiMoon className="size-4 md:size-5" />
32+
<FiMoon className="size-5" />
3133
) : (
32-
<FiSun className="size-4 md:size-5" />
34+
<FiSun className="size-5" />
3335
)}
3436
</Button>
3537
);

0 commit comments

Comments
 (0)