import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
import { H as d, T as a, C as o, a as n, c as s, aj as l, ax as m } from "../index-sdOMz8GW.js";
import { Package as c, Info as u, Wand2 as p, Layers3 as h, Minimize2 as g, AppWindow as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ t(i, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "Standalone App",
      description: "The default architectural pattern for traditional SPAs. Routes are automatically generated from menuItems configuration with sidebar navigation.",
      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-blue-500 via-cyan-500 to-teal-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: "StandaloneAppRoutesMenuItem" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Type-safe interface for defining standalone routes"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "Interface Definition", children: /* @__PURE__ */ e(s, { language: "TS", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
  component: React.JSX.Element;    // Component to render
  isPublic?: boolean;              // If true, accessible without authentication
  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested sub-routes
}` }) }) }),
    /* @__PURE__ */ e(l, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
      /* @__PURE__ */ e(u, { className: "w-4 h-4 inline mr-2" }),
      "The Standalone pattern is the default. You don't need to specify",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "architecturalPatterns" }),
      ". Simply provide",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "menuItems" }),
      " ",
      "and routes will be generated."
    ] }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Simple standalone app with nested routes"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "ThemeProvider with menuItems", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider, StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
import '@e-burgos/tucu-ui/styles';

const menuItems: StandaloneAppRoutesMenuItem[] = [
  {
    name: 'Home',
    path: '/',
    icon: <LucideIcons.Home />,
    component: <HomePage />,
    isPublic: true,
  },
  {
    name: 'Dashboard',
    path: '/dashboard',
    icon: <LucideIcons.LayoutDashboard />,
    component: <DashboardPage />,
  },
  {
    name: 'Settings',
    path: '/settings',
    icon: <LucideIcons.Settings />,
    component: <SettingsPage />,
    enableNestedRoutes: true,
    dropdownItems: [
      {
        name: 'Profile',
        path: '/settings/profile',
        component: <ProfilePage />,
      },
      {
        name: 'Preferences',
        path: '/settings/preferences',
        component: <PreferencesPage />,
      },
    ],
  },
];

function StandaloneApp() {
  return (
    <ThemeProvider
      // architecturalPatterns="standalone" is the default (optional)
      menuItems={menuItems}
      logo={{ name: 'My', secondName: 'App' }}
      showSettings
    />
  );
}` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Custom Routes Override" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Override default routing with customRoutes prop"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { title: "Custom Routing", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
import { ReactRouter } from '@e-burgos/tucu-ui';

const { Routes, Route } = ReactRouter;

function StandaloneApp() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      customRoutes={
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/custom" element={<CustomPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      }
    />
  );
}` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Features" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Benefits of the Standalone pattern"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Auto Route Generation",
        description: "Routes created automatically from menuItems. No manual setup required.",
        iconBgClassName: "from-blue-500 to-cyan-500"
      },
      {
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Nested Routes",
        description: "Unlimited nesting with dropdownItems converted to dropdown menus.",
        iconBgClassName: "from-purple-500 to-indigo-500"
      },
      {
        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Simple Configuration",
        description: "Minimal setup — define menu items and the system handles the rest.",
        iconBgClassName: "from-green-500 to-emerald-500"
      },
      {
        icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Perfect for SPAs",
        description: "Ideal for traditional single-page applications without MFE complexity.",
        iconBgClassName: "from-orange-500 to-amber-500"
      }
    ].map((r) => /* @__PURE__ */ e(m, { layout: "vertical", ...r }, r.title)) })
  ] })
] });
export {
  C as default
};
