import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as o, T as a, C as s, a as i, c as r, aj as d } from "../index-sdOMz8GW.js";
import { Layers3 as c, Component as l, MousePointerClick as m, FileText as h, Wrench as p, Zap as u, Info as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ t(n, { children: [
  /* @__PURE__ */ e(
    o,
    {
      title: "Nested Routes",
      description: "Create hierarchical navigation with unlimited nesting levels. Each menu item supports dropdownItems that automatically render as sidebar dropdown menus.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Nested Routes Example" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Parent routes with dropdownItems generate hierarchical navigation"
        }
      )
    ] }),
    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Configuration", children: /* @__PURE__ */ e(r, { language: "tsx", code: `import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';

const menuItems: StandaloneAppRoutesMenuItem[] = [
  {
    name: 'Components',
    path: '/components',
    icon: <LucideIcons.Component />,
    component: <ComponentsPage />,
    enableNestedRoutes: true, // Adds /* to path for nested routing
    dropdownItems: [
      {
        name: 'Buttons',
        path: '/components/buttons',
        icon: <LucideIcons.MousePointerClick />,
        component: <ButtonsPage />,
      },
      {
        name: 'Forms',
        path: '/components/forms',
        icon: <LucideIcons.FileText />,
        component: <FormsPage />,
      },
    ],
  },
  {
    name: 'Utilities',
    path: '/utilities',
    icon: <LucideIcons.Wrench />,
    component: <UtilitiesPage />,
    dropdownItems: [
      {
        name: 'Hooks',
        path: '/utilities/hooks',
        icon: <LucideIcons.Zap />,
        component: <HooksPage />,
      },
    ],
  },
];` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Navigation Structure" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Visual representation of the generated sidebar"
        }
      )
    ] }),
    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t("div", { className: "space-y-3 p-4", children: [
      /* @__PURE__ */ t("div", { className: "p-3 bg-light-dark rounded-lg", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e("div", { className: "p-1.5 rounded bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-3 h-3 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e("span", { className: "font-medium", children: "Components" })
        ] }),
        /* @__PURE__ */ t("div", { className: "ml-6 space-y-1", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
            /* @__PURE__ */ e(m, { className: "w-3 h-3" }),
            "Buttons"
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
            /* @__PURE__ */ e(h, { className: "w-3 h-3" }),
            "Forms"
          ] })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { className: "p-3 bg-light-dark rounded-lg", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e("div", { className: "p-1.5 rounded bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-3 h-3 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e("span", { className: "font-medium", children: "Utilities" })
        ] }),
        /* @__PURE__ */ e("div", { className: "ml-6 space-y-1", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
          /* @__PURE__ */ e(u, { className: "w-3 h-3" }),
          "Hooks"
        ] }) })
      ] })
    ] }) }),
    /* @__PURE__ */ e(d, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
      /* @__PURE__ */ e(g, { className: "w-4 h-4 inline mr-2" }),
      "Use",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "enableNestedRoutes: true" }),
      " ",
      "on parent routes when child components need their own internal routing (e.g., tabs, sub-pages)."
    ] }) })
  ] })
] });
export {
  C as default
};
