import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as m, T as a, C as r } from "../index-sdOMz8GW.js";
import { ShieldCheck as h, Check as n, X as o } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => {
  const l = [
    "Use descriptive route names and paths",
    "Keep route hierarchy shallow (max 2-3 levels)",
    "Use consistent naming conventions across routes",
    "Leverage TypeScript for type-safe route definitions",
    "Use useMemo for dynamic route generation",
    "Include icons for better navigation UX",
    "Test routes with different user roles and permissions",
    "Use basePath for MFE applications",
    "Provide isAuthenticated and loginUrl in MFE mode",
    "Use enableNestedRoutes when child components need internal routing"
  ], c = [
    "Create overly deep nesting (>3 levels)",
    'Use generic names like "Page" or "Component"',
    "Hardcode paths in components — use ReactRouter hooks",
    "Forget to handle 404 pages with customRoutes",
    "Mix routing logic with business logic",
    "Skip accessibility considerations in navigation",
    "Ignore mobile navigation UX patterns",
    "Mix Standalone and MFE props in the same ThemeProvider",
    "Import directly from react-router-dom — use ReactRouter namespace",
    "Use StandaloneAppThemeProvider directly — use ThemeProvider"
  ];
  return /* @__PURE__ */ s(d, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Best Practices",
        description: "Guidelines for building maintainable, accessible, and type-safe routing configurations.",
        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Recommendations" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Follow these guidelines for robust routing"
          }
        )
      ] }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
          ] }),
          /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
          ] }, i)) })
        ] }) }),
        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
          ] }),
          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(o, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
          ] }, i)) })
        ] }) })
      ] })
    ] })
  ] });
};
export {
  x as default
};
