qt-ui-kit 1.0.30 → 1.0.31

package/dist/index.mjs

@@ -15635,33 +15635,64 @@ function QTLogo({ variant }) {
 // src/components/molecules/buttons/nav_button/main_nav_button/main_nav_button.tsx
 import clsx5 from "clsx";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-function MainNavButton({ icon, label, active }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "w-min h-min flex flex-none flex-col place-items-center gap-2", children: [
-    /* @__PURE__ */ jsx22(
-      "div",
-      {
-        className: clsx5(
-          "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl border-2 hover:border-qtpurple-500",
-          active ? "border-qtpurple-500 qt-drop-shadow-100 bg-qtpurple-200" : "border-qtpurple-300 bg-white"
+function MainNavButton({ icon, label, active, onClick }) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: "w-min h-min flex flex-none flex-col place-items-center gap-2",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: clsx5(
+              "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl border-2 hover:border-qtpurple-500",
+              active ? "border-qtpurple-500 qt-drop-shadow-100 bg-qtpurple-200" : "border-qtpurple-300 bg-white"
+            ),
+            children: icon
+          }
         ),
-        children: icon
-      }
-    ),
-    /* @__PURE__ */ jsx22("div", { className: "label-3-bold text-qtpurple-500", children: label })
-  ] });
+        /* @__PURE__ */ jsx22("div", { className: "label-3-bold text-qtpurple-500", children: label })
+      ]
+    }
+  );
 }
 
 // src/components/organisms/nav_bar/nav_bar.tsx
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-function NavBar({}) {
+function NavBar({ buttons = {} }) {
   return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col w-[66px] bg-qtneutral-100 navbar-shadow h-full py-12 place-items-center place-content-between gap-8", children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ jsx23(QTLogo, { variant: "monogram" }),
-      /* @__PURE__ */ jsx23(MainNavButton, { active: true, label: "Queue", icon: /* @__PURE__ */ jsx23(Queue, { color: "#6558FD" }) })
+      /* @__PURE__ */ jsx23(
+        MainNavButton,
+        {
+          active: buttons.queue?.active,
+          label: "Queue",
+          icon: /* @__PURE__ */ jsx23(Queue, { color: "#6558FD" }),
+          onClick: buttons.queue?.onClick
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ jsx23(MainNavButton, { label: "Account", icon: /* @__PURE__ */ jsx23(Gear, { color: "#6558FD" }) }),
-      /* @__PURE__ */ jsx23(MainNavButton, { label: "Logout", icon: /* @__PURE__ */ jsx23(Logout, { color: "#6558FD" }) })
+      /* @__PURE__ */ jsx23(
+        MainNavButton,
+        {
+          active: buttons.account?.active,
+          label: "Account",
+          icon: /* @__PURE__ */ jsx23(Gear, { color: "#6558FD" }),
+          onClick: buttons.account?.onClick
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        MainNavButton,
+        {
+          active: buttons.logout?.active,
+          label: "Logout",
+          icon: /* @__PURE__ */ jsx23(Logout, { color: "#6558FD" }),
+          onClick: buttons.logout?.onClick
+        }
+      )
     ] })
   ] });
 }