feat: refactored Navbar component (#85)

src/primitives/Navbar/Navbar.tsx

@@ -2,39 +2,23 @@ import * as React from "react";
 
 import { tv } from "tailwind-variants";
 
-import { GitcoinLogo } from "@/assets";
-
-const defaultLogo = GitcoinLogo;
+import { NavbarLogo, NavbarLogoProps, NavbarTitle, NavbarTitleProps } from "./components";
 
 const navbarVariants = tv({
   slots: {
     base: "top-0 flex h-[64px] w-full shrink-0 flex-col items-center justify-center gap-2 p-[10px_80px]",
     container: "flex w-full items-center justify-between",
     leftSection: "flex items-center gap-4",
     divider: "h-4 border-r-1.5 border-grey-700",
-    text: "font-ui-mono text-lg",
     rightSection: "flex items-center",
   },
 });
 
-interface LogoProps {
-  link?: string;
-  img?: string | React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  size?: string;
-  color?: string;
-}
-
-interface TextProps {
-  text: string;
-  link?: string;
-  className?: string;
-}
-
 export interface NavbarProps {
-  primaryLogo?: LogoProps;
-  secondaryLogo?: LogoProps;
+  primaryLogo?: NavbarLogoProps;
+  secondaryLogo?: NavbarLogoProps;
   showDivider?: boolean;
-  text: TextProps;
+  text: NavbarTitleProps;
   children?: React.ReactNode;
 }
 
@@ -45,45 +29,17 @@ export const Navbar = ({
   text,
   children,
 }: NavbarProps) => {
-  const { base, container, leftSection, divider, text: textStyle, rightSection } = navbarVariants();
-
-  const renderLogo = ({ link, img, size = "h-10 max-w-12", color = "black" }: LogoProps) => {
-    const logoClasses = `${size} text-${color}`;
-
-    if (!img) {
-      return <img src={defaultLogo} alt="Default Logo" className={logoClasses} />;
-    }
-
-    if (typeof img === "string") {
-      return <img src={img} alt="Logo" className={logoClasses} />;
-    }
-
-    const LogoComponent = img;
-    return (
-      <a href={link || "#"} style={{ color: color }}>
-        <LogoComponent className={logoClasses} />
-      </a>
-    );
-  };
-
-  const renderText = ({ text, link, className = "" }: TextProps) => {
-    const textClasses = `${textStyle()} ${className}`;
-    return (
-      <a href={link || "#"} className={textClasses}>
-        {text}
-      </a>
-    );
-  };
+  const { base, container, leftSection, divider, rightSection } = navbarVariants();
 
   return (
     <nav className={base()}>
       <div className={container()}>
         <div className={leftSection()}>
-          {renderLogo(primaryLogo || {})}
-          {showDivider && <div className={divider()}></div>}
+          <NavbarLogo {...primaryLogo} />
+          {showDivider && <div className={divider()} />}
           <div className="flex items-center gap-2">
-            {secondaryLogo && renderLogo(secondaryLogo)}
-            {renderText(text)}
+            {secondaryLogo && <NavbarLogo {...secondaryLogo} />}
+            <NavbarTitle {...text} />
           </div>
         </div>
         <div className={rightSection()}>{children}</div>

src/primitives/Navbar/components/NavbarLogo.tsx

@@ -0,0 +1,35 @@
+import { GitcoinLogo } from "@/assets";
+
+const defaultLogo = GitcoinLogo;
+
+export interface NavbarLogoProps {
+  link?: string;
+  img?: string | React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  size?: string;
+  color?: string;
+}
+
+export const NavbarLogo = ({
+  link,
+  img,
+  size = "h-10 max-w-12",
+  color = "black",
+}: NavbarLogoProps) => {
+  const logoClasses = `${size} text-${color}`;
+
+  if (!img) {
+    return <img src={defaultLogo} alt="Default Logo" className={logoClasses} />;
+  }
+
+  if (typeof img === "string") {
+    return <img src={img} alt="Logo" className={logoClasses} />;
+  }
+
+  const LogoComponent = img;
+
+  return (
+    <a href={link || "#"} style={{ color }}>
+      <LogoComponent className={logoClasses} />
+    </a>
+  );
+};

src/primitives/Navbar/components/NavbarTitle.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib";
+
+export interface NavbarTitleProps {
+  text: string;
+  link?: string;
+  className?: string;
+}
+
+export const NavbarTitle = ({ text, link, className = "" }: NavbarTitleProps) => {
+  return (
+    <a href={link || "#"} className={cn("font-ui-mono text-lg", className)}>
+      {text}
+    </a>
+  );
+};

src/primitives/Navbar/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./NavbarLogo";
+export * from "./NavbarTitle";