import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
import { H as s, T as n, C as o, a, c as i } from "../index-sdOMz8GW.js";
import { Settings as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const I = () => /* @__PURE__ */ t(r, { children: [
  /* @__PURE__ */ e(
    s,
    {
      title: "Route Configuration",
      description: "Define routes using the StandaloneAppRoutesMenuItem interface. Each menu item automatically becomes a navigable route with sidebar entry.",
      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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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(n, { tag: "h2", className: "mb-2", children: "StandaloneAppRoutesMenuItem Interface" }),
      /* @__PURE__ */ e(
        n,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Type-safe route definition extending IMenuItem"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(a, { title: "Interface Definition", children: /* @__PURE__ */ e(i, { language: "TS", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
  component: React.JSX.Element;    // The component to render
  isPublic?: boolean;              // If true, accessible without authentication
  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested sub-routes
}

interface IMenuItem {
  name: string;                    // Display name for the menu item
  path: string;                    // URL path for the route
  icon?: React.ReactNode;          // Optional icon component
  href?: string;                   // Optional external URL
  hide?: boolean;                  // Hide from navigation menu
  isActive?: boolean;              // Force active state
  onClick?: () => void;            // Optional click handler
}` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
      /* @__PURE__ */ e(
        n,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Simple standalone app with automatic route generation"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(a, { title: "ThemeProvider with menuItems", children: /* @__PURE__ */ e(i, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
import { Introduction } from './pages/Introduction';
import { ThemingGuide } from './pages/ThemingGuide';

const menuItems: StandaloneAppRoutesMenuItem[] = [
  {
    name: 'Introduction',
    path: '/',
    icon: <LucideIcons.Home />,
    component: <Introduction />,
  },
  {
    name: 'Theming',
    path: '/theming-guide',
    icon: <LucideIcons.Paintbrush />,
    component: <ThemingGuide />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      logo={{ name: 'My', secondName: 'App' }}
    />
  );
}` }) }) })
  ] })
] });
export {
  I as default
};
