Skip to content

Commit 68011d5

Browse files
MananTankMananTank
committed
Add Logged Out Variant of Team Header (#5160)
## Problem solved Short description of the bug fixed or feature added
1 parent 939e7ab commit 68011d5

File tree

7 files changed

+184
-43
lines changed

7 files changed

+184
-43
lines changed

‎apps/dashboard/src/app/account/components/AccountHeaderUI.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
103103
</div>
104104

105105
<MobileBurgerMenuButton
106+
type="loggedIn"
106107
email={props.account?.email}
107108
logout={props.logout}
108109
connectButton={props.connectButton}

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,19 @@ export function SecondaryNav(props: {
1111
logout: () => void;
1212
connectButton: React.ReactNode;
1313
}) {
14+
return (
15+
<div className="flex items-center gap-6">
16+
<SecondaryNavLinks />
17+
<AccountButton
18+
logout={props.logout}
19+
connectButton={props.connectButton}
20+
account={props.account}
21+
/>
22+
</div>
23+
);
24+
}
25+
26+
export function SecondaryNavLinks() {
1427
return (
1528
<div className="flex items-center gap-6">
1629
<ToolTipLabel
@@ -45,12 +58,6 @@ export function SecondaryNav(props: {
4558
>
4659
Docs
4760
</Link>
48-
49-
<AccountButton
50-
logout={props.logout}
51-
connectButton={props.connectButton}
52-
account={props.account}
53-
/>
5461
</div>
5562
);
5663
}

‎apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,20 @@ import { useTheme } from "next-themes";
1616
import Link from "next/link";
1717
import { useLayoutEffect, useState } from "react";
1818
import { CmdKSearchModal } from "../../components/cmd-k-search";
19-
20-
export function MobileBurgerMenuButton(props: {
21-
email: string | undefined;
22-
logout: () => void;
23-
connectButton: React.ReactNode;
24-
}) {
19+
import { ThirdwebMiniLogo } from "./ThirdwebMiniLogo";
20+
21+
export function MobileBurgerMenuButton(
22+
props:
23+
| {
24+
type: "loggedIn";
25+
email: string | undefined;
26+
logout: () => void;
27+
connectButton: React.ReactNode;
28+
}
29+
| {
30+
type: "loggedOut";
31+
},
32+
) {
2533
const [isMenuOpen, setIsMenuOpen] = useState(false);
2634
const { setTheme, theme } = useTheme();
2735
const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
@@ -62,41 +70,51 @@ export function MobileBurgerMenuButton(props: {
6270
<XIcon className="size-7 text-muted-foreground" />
6371
</Button>
6472

65-
<SkeletonContainer
66-
skeletonData="[email protected]"
67-
loadedData={props.email}
68-
className="inline-block self-start"
69-
render={(email) => <p className="text-foreground">{email}</p>}
70-
/>
73+
<Link href="/team">
74+
<ThirdwebMiniLogo className="h-5" />
75+
</Link>
7176

72-
<div className="h-4" />
77+
<div className="h-5" />
7378

74-
<div className="[&>button]:!w-full">{props.connectButton}</div>
79+
{props.type === "loggedIn" && (
80+
<>
81+
<SkeletonContainer
82+
skeletonData="[email protected]"
83+
loadedData={props.email}
84+
className="inline-block self-start"
85+
render={(email) => <p className="text-foreground">{email}</p>}
86+
/>
7587

76-
<div className="h-6" />
88+
<div className="h-3" />
7789

78-
<div className="flex flex-col gap-4">
79-
<Link
80-
href="/account"
81-
className="flex items-center gap-2 text-base text-muted-foreground hover:text-foreground "
82-
>
83-
<SettingsIcon className="size-4" />
84-
Account Settings
85-
</Link>
90+
<div className="[&>button]:!w-full">{props.connectButton}</div>
8691

87-
<Button
88-
variant="link"
89-
className="!h-auto hover:!no-underline justify-start gap-2 px-0 py-1 text-start text-base text-muted-foreground hover:text-foreground"
90-
onClick={props.logout}
91-
>
92-
<LogOutIcon className="size-4" />
93-
Log Out
94-
</Button>
95-
</div>
92+
<div className="h-6" />
93+
94+
<div className="flex flex-col gap-4">
95+
<Link
96+
href="/account"
97+
className="flex items-center gap-2 text-base text-muted-foreground hover:text-foreground "
98+
>
99+
<SettingsIcon className="size-4" />
100+
Account Settings
101+
</Link>
102+
103+
<Button
104+
variant="link"
105+
className="!h-auto hover:!no-underline justify-start gap-2 px-0 py-1 text-start text-base text-muted-foreground hover:text-foreground"
106+
onClick={props.logout}
107+
>
108+
<LogOutIcon className="size-4" />
109+
Log Out
110+
</Button>
111+
</div>
96112

97-
<div className="h-6" />
98-
<Separator />
99-
<div className="h-6" />
113+
<div className="h-6" />
114+
<Separator />
115+
<div className="h-6" />
116+
</>
117+
)}
100118

101119
<div className="flex flex-col gap-5">
102120
<Button

‎apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { mobileViewport } from "../../../../stories/utils";
3+
import {
4+
TeamHeaderLoggedOutDesktopUI,
5+
TeamHeaderLoggedOutMobileUI,
6+
} from "./TeamHeaderLoggedOut";
7+
import {} from "./TeamHeaderUI";
8+
9+
const meta = {
10+
title: "Team/TeamHeaderLoggedOut",
11+
component: Variants,
12+
parameters: {
13+
nextjs: {
14+
appDirectory: true,
15+
},
16+
},
17+
} satisfies Meta<typeof Variants>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
export const Desktop: Story = {
23+
args: {
24+
type: "desktop",
25+
},
26+
};
27+
28+
export const Mobile: Story = {
29+
args: {
30+
type: "mobile",
31+
},
32+
parameters: {
33+
viewport: mobileViewport("iphone14"),
34+
},
35+
};
36+
37+
function Variants(props: {
38+
type: "mobile" | "desktop";
39+
}) {
40+
const Comp =
41+
props.type === "mobile"
42+
? TeamHeaderLoggedOutMobileUI
43+
: TeamHeaderLoggedOutDesktopUI;
44+
45+
return (
46+
<div className="container min-h-screen bg-zinc-900 py-10">
47+
<div className="bg-background">
48+
<Comp />
49+
</div>
50+
</div>
51+
);
52+
}

‎apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Button } from "@/components/ui/button";
2+
import { cn } from "@/lib/utils";
3+
import Link from "next/link";
4+
import { CmdKSearch } from "../../../../components/cmd-k-search";
5+
import { SecondaryNavLinks } from "../../../components/Header/SecondaryNav/SecondaryNav";
6+
import { MobileBurgerMenuButton } from "../../../components/MobileBurgerMenuButton";
7+
import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
8+
9+
export function TeamHeaderLoggedOutDesktopUI(props: {
10+
className?: string;
11+
}) {
12+
return (
13+
<header
14+
className={cn(
15+
"flex flex-row items-center justify-between gap-2 px-6 py-4 text-foreground ",
16+
props.className,
17+
)}
18+
>
19+
<div className="flex items-center gap-4">
20+
<Link href="/team">
21+
<ThirdwebMiniLogo className="h-5" />
22+
</Link>
23+
24+
<CmdKSearch className="h-auto py-1.5" />
25+
</div>
26+
27+
<div className="flex items-center gap-6">
28+
<SecondaryNavLinks />
29+
30+
<Button size="sm" variant="primary" className="rounded-lg" asChild>
31+
<Link href="/login">Sign in</Link>
32+
</Button>
33+
</div>
34+
</header>
35+
);
36+
}
37+
38+
export function TeamHeaderLoggedOutMobileUI(props: {
39+
className?: string;
40+
}) {
41+
return (
42+
<header
43+
className={cn(
44+
"flex flex-row items-center justify-between gap-2 px-4 py-4 text-foreground",
45+
props.className,
46+
)}
47+
>
48+
<Link href="/team">
49+
<ThirdwebMiniLogo className="h-5" />
50+
</Link>
51+
52+
<div className="flex items-center gap-3">
53+
<Button size="sm" variant="primary" className="rounded-lg" asChild>
54+
<Link href="/login">Sign in</Link>
55+
</Button>
56+
<MobileBurgerMenuButton type="loggedOut" />
57+
</div>
58+
</header>
59+
);
60+
}

‎apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
171171
</div>
172172

173173
<MobileBurgerMenuButton
174+
type="loggedIn"
174175
email={props.account?.email}
175176
logout={props.logout}
176177
connectButton={props.connectButton}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,9 @@ export const CmdKSearchModal = (props: {
273273
);
274274
};
275275

276-
export const CmdKSearch: React.FC = () => {
276+
export const CmdKSearch = (props: {
277+
className?: string;
278+
}) => {
277279
const [open, setOpen] = useState(false);
278280

279281
return (
@@ -282,7 +284,7 @@ export const CmdKSearch: React.FC = () => {
282284
<Input
283285
onClick={() => setOpen(true)}
284286
placeholder="Search any contract"
285-
className="bg-transparent pr-4"
287+
className={cn("bg-transparent pr-4", props.className)}
286288
/>
287289
<div className="-translate-y-1/2 absolute top-1/2 right-3 flex items-center gap-[2px] text-muted-foreground text-sm">
288290
<CommandIcon className="size-3" /> K

0 commit comments

Comments
 (0)