add links

Author: 0xKurt

src/primitives/Navbar/Navbar.stories.tsx

@@ -1,8 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+
+
 import { DefaultLogo } from "@/assets";
 
+
+
 import { Navbar } from "./Navbar";
+import { Button } from "../Button";
+
+
+// Adjust the path as needed
 
 const meta = {
   title: "Primitives/Navbar",
@@ -11,10 +19,19 @@ const meta = {
     text: "My Navbar",
   },
   argTypes: {
-    logo1: {
+    primaryLogo: {
+      control: "text",
+    },
+    secondaryLogo: {
       control: "text",
     },
-    logo2: {
+    primaryLogoLink: {
+      control: "text",
+    },
+    secondaryLogoLink: {
+      control: "text",
+    },
+    textLink: {
       control: "text",
     },
     text: {
@@ -30,23 +47,38 @@ export default meta;
 
 type Story = StoryObj<typeof Navbar>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    primaryLogoLink: "#",
+    secondaryLogo: DefaultLogo,
+    secondaryLogoLink: "#",
+    textLink: "#",
+  },
+};
 
-export const WithSecondLogo: Story = {
+export const WithSecondaryLogo: Story = {
   args: {
-    logo2: DefaultLogo,
+    primaryLogoLink: "#",
+    secondaryLogo: DefaultLogo,
+    secondaryLogoLink: "#",
+    textLink: "#",
   },
 };
 
 export const WithCustomTextAndWithoutDivider: Story = {
   args: {
+    primaryLogoLink: "#",
     text: "Custom Navbar",
+    textLink: "#",
     showDivider: false,
   },
 };
 
 export const WithChildren: Story = {
   args: {
-    children: <button>Login</button>,
+    secondaryLogo: DefaultLogo,
+    secondaryLogoLink: "#",
+    textLink: "#",
+    children: <Button value="Connect Wallet"/>,
   },
-};
+};

src/primitives/Navbar/Navbar.tsx

@@ -10,35 +10,63 @@ 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",
-    left: "flex items-center gap-4",
+    leftSection: "flex items-center gap-4",
     logo: "h-10",
     divider: "h-4 border-r border-grey-700",
     text: "text-lg font-semibold",
-    right: "flex items-center",
+    rightSection: "flex items-center",
   },
 });
 
 export interface NavbarProps {
-  logo1?: string;
-  logo2?: string;
+  primaryLogo?: string;
+  secondaryLogo?: string;
   showDivider?: boolean;
   text: string;
+  primaryLogoLink?: string;
+  secondaryLogoLink?: string;
+  textLink?: string;
   children?: React.ReactNode;
 }
 
-export const Navbar = ({ logo1, logo2, showDivider = true, text, children }: NavbarProps) => {
-  const { base, container, left, logo, divider, text: textStyle, right } = navbarVariants();
+export const Navbar = ({
+  primaryLogo,
+  secondaryLogo,
+  showDivider = true,
+  text,
+  primaryLogoLink,
+  secondaryLogoLink,
+  textLink,
+  children,
+}: NavbarProps) => {
+  const {
+    base,
+    container,
+    leftSection,
+    logo,
+    divider,
+    text: textStyle,
+    rightSection,
+  } = navbarVariants();
 
   return (
     <nav className={base()}>
       <div className={container()}>
-        <div className={left()}>
-          <img src={logo1 || defaultLogo} alt="Logo 1" className={logo()} />
+        <div className={leftSection()}>
+          <a href={primaryLogoLink || "#"}>
+            <img src={primaryLogo || defaultLogo} alt="Primary Logo" className={logo()} />
+          </a>
           {showDivider && <div className={divider()}></div>}
-          {logo2 && <img src={logo2} alt="Logo 2" className={logo()} />}
-          <span className={textStyle()}>{text}</span>
+          {secondaryLogo && (
+            <a href={secondaryLogoLink || "#"}>
+              <img src={secondaryLogo} alt="Secondary Logo" className={logo()} />
+            </a>
+          )}
+          <a href={textLink || "#"} className={textStyle()}>
+            {text}
+          </a>
         </div>
-        <div className={right()}>{children}</div>
+        <div className={rightSection()}>{children}</div>
       </div>
     </nav>
   );