@kloudlite/design-system/mjs/header.js

A design system for building ambitious products.

// components/header.tsx
import { Link, useLocation } from "react-router-dom";
import classnames from "classnames";
import { jsx, jsxs } from "react/jsx-runtime";
var HeaderLink = (props) => {
  const { to = "", children } = props;
  const location = useLocation();
  const isActive = location.pathname === to;
  return /* @__PURE__ */ jsx(
    Link,
    {
      to,
      className: classnames(
        "kl-flex kl-transition-all hover:kl-text-text-default kl-font-medium kl-headingSm kl-items-center",
        {
          "kl-text-text-default": isActive,
          "kl-text-text-soft": !isActive
        },
        "kl-px-1"
      ),
      children
    }
  );
};
var NavBar = () => {
  return /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-row kl-justify-between kl-p-4", children: [
    /* @__PURE__ */ jsx(Link, { className: "kl-p-1", to: "/", children: "Kloudlite Draft" }),
    /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-gap-x-8", children: [
      /* @__PURE__ */ jsx(HeaderLink, { to: "/", children: "Home" }),
      /* @__PURE__ */ jsx(HeaderLink, { to: "/features", children: "Features" }),
      /* @__PURE__ */ jsx(HeaderLink, { to: "/pricing", children: "Pricing" }),
      /* @__PURE__ */ jsx(HeaderLink, { to: "/resources", children: "Resources" }),
      /* @__PURE__ */ jsx(HeaderLink, { to: "/about", children: "About Us" }),
      /* @__PURE__ */ jsx(HeaderLink, { to: "#", children: "Login / Sign Up" })
    ] })
  ] });
};
export {
  NavBar
};