feat: implemented generic NavBar in common package

packages/common/src/components/NavbarGeneric/NavbarActions.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+
+export function NavbarActions({ children }: PropsWithChildren) {
+ return (
+ <div className="flex items-center gap-6" data-testid="navbar-actions">
+ {children}
+ </div>
+ );
+}
+
+NavbarActions.displayName = "NavbarActions";
+NavbarActions.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarBanner.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { useNavbarContext } from "./NavbarContext";
+
+export function NavbarBanner({ children }: { children: ReactElement }) {
+ const { showBanner } = useNavbarContext();
+ if (!showBanner) return null;
+ return (
+ <div
+ className="bg-white/40 backdrop-blur-sm text-center w-full font-medium flex flex-col items-center justify-center text-black"
+ data-testid="navbar-banner"
+ >
+ {children}
+ </div>
+ );
+}
+
+NavbarBanner.displayName = "NavbarBanner";
+NavbarBanner.navbarSection = "banner";

packages/common/src/components/NavbarGeneric/NavbarConnectButton.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+import { useNavbarContext } from "./NavbarContext";
+
+export function NavbarConnectButton({ children }: PropsWithChildren) {
+ const { showWalletInteraction } = useNavbarContext();
+
+ if (!showWalletInteraction) return null;
+
+ return (
+ <div data-testid="connect-wallet-button" id="connect-wallet-button">
+ {children}
+ </div>
+ );
+}
+
+NavbarConnectButton.displayName = "NavbarConnectButton";
+NavbarConnectButton.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarContext.tsx

@@ -0,0 +1,29 @@
+import { createContext, PropsWithChildren, useContext } from "react";
+
+// Define the type for the context value
+type NavbarContextType = {
+ showWalletInteraction?: boolean;
+ showBanner?: boolean;
+};
+
+const NavbarContext = createContext<NavbarContextType | undefined>(undefined);
+
+type NavbarProviderProps = PropsWithChildren<{
+ value: NavbarContextType;
+}>;
+
+const NavbarProvider: React.FC<NavbarProviderProps> = ({ children, value }) => {
+ return (
+ <NavbarContext.Provider value={value}>{children}</NavbarContext.Provider>
+ );
+};
+
+const useNavbarContext = () => {
+ const context = useContext(NavbarContext);
+ if (!context) {
+ throw new Error("useNavbarContext must be used within a NavbarContext");
+ }
+ return context;
+};
+
+export { NavbarProvider, useNavbarContext };

packages/common/src/components/NavbarGeneric/NavbarCustomAction.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+
+export function NavbarCustomAction({
+ children,
+ testId,
+}: PropsWithChildren<{
+ testId?: string;
+}>) {
+ return (
+ <div
+ className="flex items-center"
+ data-testid={testId || "navbar-custom-action"}
+ >
+ {children}
+ </div>
+ );
+}
+
+NavbarCustomAction.displayName = "NavbarCustomAction";
+NavbarCustomAction.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarGeneric.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren, ReactElement } from "react";
+import { NavbarBanner } from "./NavbarBanner";
+import { NavbarCustomAction } from "./NavbarCustomAction";
+import { NavbarConnectButton } from "./NavbarConnectButton";
+import { NavbarActions } from "./NavbarActions";
+import { NavbarLogo } from "./NavbarLogo";
+import { NavbarProvider } from "./NavbarContext";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type NavbarSubComponent = React.ComponentType<any> & {
+ displayName?: string;
+ navbarSection?: "main" | "banner";
+};
+
+function isNavbarSubComponent(
+ child: React.ReactNode
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): child is ReactElement<any, NavbarSubComponent> {
+ return (
+ React.isValidElement(child) &&
+ typeof child.type === "function" &&
+ "displayName" in child.type
+ );
+}
+
+function filterNavbarSubComponentsBySection(
+ children: React.ReactNode,
+ section: "main" | "banner"
+): React.ReactNode {
+ return React.Children.toArray(children).filter(
+ (child) =>
+ isNavbarSubComponent(child) && child.type.navbarSection === section
+ );
+}
+
+type NavbarGenericProps = PropsWithChildren<{
+ className?: string;
+ showWalletInteraction?: boolean;
+ showBanner?: boolean;
+ fixed?: boolean;
+ blurred?: boolean;
+}>;
+
+export function NavbarGeneric({
+ children,
+ fixed = false,
+ blurred = false,
+ className = "",
+ showWalletInteraction = true,
+ showBanner = false,
+}: NavbarGenericProps) {
+ const mainComponents = filterNavbarSubComponentsBySection(children, "main");
+ const bannerComponent = filterNavbarSubComponentsBySection(
+ children,
+ "banner"
+ );
+
+ return (
+ <NavbarProvider value={{ showWalletInteraction, showBanner }}>
+ <header className="w-full mb-3" data-testid="navbar-container">
+ <nav
+ className={`w-full z-20 shadow-md ${className} ${
+ fixed ? "fixed" : ""
+ } ${blurred ? "blurred" : ""}`}
+ data-testid="navbar"
+ >
+ <div className="h-16 mx-auto py-[10px] px-4 sm:px-6 lg:px-20 flex justify-between items-center">
+ {mainComponents}
+ </div>
+ {bannerComponent}
+ </nav>
+ </header>
+ </NavbarProvider>
+ );
+}
+
+NavbarGeneric.Logo = NavbarLogo;
+
+// Actions component for right-side items
+NavbarGeneric.Actions = NavbarActions;
+
+NavbarGeneric.ConnectButton = NavbarConnectButton;
+
+NavbarGeneric.CustomAction = NavbarCustomAction;
+
+NavbarGeneric.Banner = NavbarBanner;
+
+NavbarGeneric.displayName = "NavbarGeneric";

packages/common/src/components/NavbarGeneric/NavbarLogo.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
+
+import { ReactComponent as GitcoinLogo } from "../../assets/gitcoinlogo-black.svg";
+import { NavbarSeparator } from "./NavbarSeparator";
+export function NavbarLogo({
+ to = "",
+ children,
+}: PropsWithChildren<{
+ to?: string;
+}>) {
+ return (
+ <Link //NavbarLink
+ to={to}
+ className="flex-shrink-0 flex items-center gap-4"
+ data-testid="navbar-logo"
+ >
+ <GitcoinLogo className="h-8 w-auto" />
+ {children ? (
+ <>
+ <NavbarSeparator />
+ {children}
+ </>
+ ) : null}
+ </Link>
+ );
+}
+
+NavbarLogo.displayName = "NavbarLogo";
+NavbarLogo.navbarSection = "main";

packages/common/src/components/NavbarGeneric/NavbarSeparator.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export function NavbarSeparator() {
+ return <div className="border-r border-[1.5px] border-grey-400 h-4" />;
+}
+
+NavbarSeparator.displayName = "NavbarSeparator";

packages/common/src/components/NavbarGeneric/index.ts

@@ -0,0 +1 @@
+export { NavbarGeneric } from "./NavbarGeneric";

packages/common/src/components/index.ts

@@ -0,0 +1 @@
+export { NavbarGeneric } from "./NavbarGeneric";

tsconfig.json

@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es2020",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "sourceMap": true,
+ "incremental": true
+ }
+}