From 68011d5c76d4d8319c0cb2f75cd8fbae043a4958 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 28 Oct 2024 17:48:33 +0000
Subject: [PATCH] Add Logged Out Variant of Team Header (#5160)

## Problem solved

Short description of the bug fixed or feature added
---
 .../account/components/AccountHeaderUI.tsx    |  1 +
 .../Header/SecondaryNav/SecondaryNav.tsx      | 19 ++--
 .../app/components/MobileBurgerMenuButton.tsx | 88 +++++++++++--------
 .../TeamHeaderLoggedOut.stories.tsx           | 52 +++++++++++
 .../TeamHeader/TeamHeaderLoggedOut.tsx        | 60 +++++++++++++
 .../components/TeamHeader/TeamHeaderUI.tsx    |  1 +
 .../src/components/cmd-k-search/index.tsx     |  6 +-
 7 files changed, 184 insertions(+), 43 deletions(-)
 create mode 100644 apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
 create mode 100644 apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx

diff --git a/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx b/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
index 38c01c6ee75..5bda1204215 100644
--- a/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeaderUI.tsx
@@ -103,6 +103,7 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
       </div>
 
       <MobileBurgerMenuButton
+        type="loggedIn"
         email={props.account?.email}
         logout={props.logout}
         connectButton={props.connectButton}
diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
index 78ae51768c5..2ed76f6dab0 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
@@ -11,6 +11,19 @@ export function SecondaryNav(props: {
   logout: () => void;
   connectButton: React.ReactNode;
 }) {
+  return (
+    <div className="flex items-center gap-6">
+      <SecondaryNavLinks />
+      <AccountButton
+        logout={props.logout}
+        connectButton={props.connectButton}
+        account={props.account}
+      />
+    </div>
+  );
+}
+
+export function SecondaryNavLinks() {
   return (
     <div className="flex items-center gap-6">
       <ToolTipLabel
@@ -45,12 +58,6 @@ export function SecondaryNav(props: {
       >
         Docs
       </Link>
-
-      <AccountButton
-        logout={props.logout}
-        connectButton={props.connectButton}
-        account={props.account}
-      />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx b/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
index 8bdd850fe85..a3e5d7123f8 100644
--- a/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
+++ b/apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx
@@ -16,12 +16,20 @@ import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useLayoutEffect, useState } from "react";
 import { CmdKSearchModal } from "../../components/cmd-k-search";
-
-export function MobileBurgerMenuButton(props: {
-  email: string | undefined;
-  logout: () => void;
-  connectButton: React.ReactNode;
-}) {
+import { ThirdwebMiniLogo } from "./ThirdwebMiniLogo";
+
+export function MobileBurgerMenuButton(
+  props:
+    | {
+        type: "loggedIn";
+        email: string | undefined;
+        logout: () => void;
+        connectButton: React.ReactNode;
+      }
+    | {
+        type: "loggedOut";
+      },
+) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { setTheme, theme } = useTheme();
   const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
@@ -62,41 +70,51 @@ export function MobileBurgerMenuButton(props: {
             <XIcon className="size-7 text-muted-foreground" />
           </Button>
 
-          <SkeletonContainer
-            skeletonData="someone@example.com"
-            loadedData={props.email}
-            className="inline-block self-start"
-            render={(email) => <p className="text-foreground">{email}</p>}
-          />
+          <Link href="/team">
+            <ThirdwebMiniLogo className="h-5" />
+          </Link>
 
-          <div className="h-4" />
+          <div className="h-5" />
 
-          <div className="[&>button]:!w-full">{props.connectButton}</div>
+          {props.type === "loggedIn" && (
+            <>
+              <SkeletonContainer
+                skeletonData="someone@example.com"
+                loadedData={props.email}
+                className="inline-block self-start"
+                render={(email) => <p className="text-foreground">{email}</p>}
+              />
 
-          <div className="h-6" />
+              <div className="h-3" />
 
-          <div className="flex flex-col gap-4">
-            <Link
-              href="/account"
-              className="flex items-center gap-2 text-base text-muted-foreground hover:text-foreground "
-            >
-              <SettingsIcon className="size-4" />
-              Account Settings
-            </Link>
+              <div className="[&>button]:!w-full">{props.connectButton}</div>
 
-            <Button
-              variant="link"
-              className="!h-auto hover:!no-underline justify-start gap-2 px-0 py-1 text-start text-base text-muted-foreground hover:text-foreground"
-              onClick={props.logout}
-            >
-              <LogOutIcon className="size-4" />
-              Log Out
-            </Button>
-          </div>
+              <div className="h-6" />
+
+              <div className="flex flex-col gap-4">
+                <Link
+                  href="/account"
+                  className="flex items-center gap-2 text-base text-muted-foreground hover:text-foreground "
+                >
+                  <SettingsIcon className="size-4" />
+                  Account Settings
+                </Link>
+
+                <Button
+                  variant="link"
+                  className="!h-auto hover:!no-underline justify-start gap-2 px-0 py-1 text-start text-base text-muted-foreground hover:text-foreground"
+                  onClick={props.logout}
+                >
+                  <LogOutIcon className="size-4" />
+                  Log Out
+                </Button>
+              </div>
 
-          <div className="h-6" />
-          <Separator />
-          <div className="h-6" />
+              <div className="h-6" />
+              <Separator />
+              <div className="h-6" />
+            </>
+          )}
 
           <div className="flex flex-col gap-5">
             <Button
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
new file mode 100644
index 00000000000..4059d09b825
--- /dev/null
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../../stories/utils";
+import {
+  TeamHeaderLoggedOutDesktopUI,
+  TeamHeaderLoggedOutMobileUI,
+} from "./TeamHeaderLoggedOut";
+import {} from "./TeamHeaderUI";
+
+const meta = {
+  title: "Team/TeamHeaderLoggedOut",
+  component: Variants,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Variants>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {
+    type: "desktop",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    type: "mobile",
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Variants(props: {
+  type: "mobile" | "desktop";
+}) {
+  const Comp =
+    props.type === "mobile"
+      ? TeamHeaderLoggedOutMobileUI
+      : TeamHeaderLoggedOutDesktopUI;
+
+  return (
+    <div className="container min-h-screen bg-zinc-900 py-10">
+      <div className="bg-background">
+        <Comp />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx
new file mode 100644
index 00000000000..6a29dfefd19
--- /dev/null
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { CmdKSearch } from "../../../../components/cmd-k-search";
+import { SecondaryNavLinks } from "../../../components/Header/SecondaryNav/SecondaryNav";
+import { MobileBurgerMenuButton } from "../../../components/MobileBurgerMenuButton";
+import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
+
+export function TeamHeaderLoggedOutDesktopUI(props: {
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        "flex flex-row items-center justify-between gap-2 px-6 py-4 text-foreground ",
+        props.className,
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <Link href="/team">
+          <ThirdwebMiniLogo className="h-5" />
+        </Link>
+
+        <CmdKSearch className="h-auto py-1.5" />
+      </div>
+
+      <div className="flex items-center gap-6">
+        <SecondaryNavLinks />
+
+        <Button size="sm" variant="primary" className="rounded-lg" asChild>
+          <Link href="/login">Sign in</Link>
+        </Button>
+      </div>
+    </header>
+  );
+}
+
+export function TeamHeaderLoggedOutMobileUI(props: {
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        "flex flex-row items-center justify-between gap-2 px-4 py-4 text-foreground",
+        props.className,
+      )}
+    >
+      <Link href="/team">
+        <ThirdwebMiniLogo className="h-5" />
+      </Link>
+
+      <div className="flex items-center gap-3">
+        <Button size="sm" variant="primary" className="rounded-lg" asChild>
+          <Link href="/login">Sign in</Link>
+        </Button>
+        <MobileBurgerMenuButton type="loggedOut" />
+      </div>
+    </header>
+  );
+}
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
index 31778a41dbb..062f5167cbf 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx
@@ -171,6 +171,7 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
       </div>
 
       <MobileBurgerMenuButton
+        type="loggedIn"
         email={props.account?.email}
         logout={props.logout}
         connectButton={props.connectButton}
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
index 30a18d5bc7a..7cf09bb2cae 100644
--- a/apps/dashboard/src/components/cmd-k-search/index.tsx
+++ b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -273,7 +273,9 @@ export const CmdKSearchModal = (props: {
   );
 };
 
-export const CmdKSearch: React.FC = () => {
+export const CmdKSearch = (props: {
+  className?: string;
+}) => {
   const [open, setOpen] = useState(false);
 
   return (
@@ -282,7 +284,7 @@ export const CmdKSearch: React.FC = () => {
         <Input
           onClick={() => setOpen(true)}
           placeholder="Search any contract"
-          className="bg-transparent pr-4"
+          className={cn("bg-transparent pr-4", props.className)}
         />
         <div className="-translate-y-1/2 absolute top-1/2 right-3 flex items-center gap-[2px] text-muted-foreground text-sm">
           <CommandIcon className="size-3" /> K