import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as l, C as a, a as o, T as c, a8 as i, P as m, A as r, c as h } from "../index-sdOMz8GW.js";
import { Link as d } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => /* @__PURE__ */ t(s, { children: [
  /* @__PURE__ */ e(
    l,
    {
      title: "ActiveLink",
      description: `A link component that automatically applies an active class when the
          current path matches the link path.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t(a, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Active Link" }),
      /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
        /* @__PURE__ */ e(i, { to: "/components", path: "/components", children: "Components" }),
        /* @__PURE__ */ e(i, { to: "/about", path: "/about", children: "About" })
      ] })
    ] }),
    /* @__PURE__ */ t(a, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Custom Active Class" }),
      /* @__PURE__ */ e(
        i,
        {
          to: "/home",
          path: "/home",
          activeClassName: "text-brand font-bold",
          children: "Home"
        }
      )
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    m,
    {
      componentName: "ActiveLink",
      defaultValues: { path: "/demo", activeClassName: "active" },
      excludeProps: ["state", "to"],
      children: (n) => /* @__PURE__ */ e(i, { ...n, to: "#", children: "Active Link Example" })
    }
  ),
  /* @__PURE__ */ e(r, { componentName: "ActiveLink" }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    h,
    {
      language: "tsx",
      code: `import { ActiveLink } from '@e-burgos/tucu-ui';

// Basic usage
<ActiveLink to="/components" path="/components">
  Components
</ActiveLink>

// With custom active class
<ActiveLink
  to="/home"
  path="/home"
  activeClassName="text-brand font-bold"
>
  Home
</ActiveLink>

// Navigation example
<nav>
  <ActiveLink to="/" path="/">Home</ActiveLink>
  <ActiveLink to="/about" path="/about">About</ActiveLink>
  <ActiveLink to="/contact" path="/contact">Contact</ActiveLink>
</nav>`
    }
  ) }) }) })
] });
export {
  b as default
};
