import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as m, T as r, C as i, a as n } from "../index-sdOMz8GW.js";
import { ShieldCheck as d, Check as h, X as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => {
  const l = [
    "Use the useTheme hook to access theme state",
    "Utilize built-in color presets for consistency",
    "Test your application in both light and dark modes",
    "Use the settings panel for user customization",
    "Leverage persistent storage for user preferences",
    "Use semantic Tailwind classes (bg-brand, text-secondary)",
    "Respect THEME_STYLE_LAYOUTS constraints when changing layouts"
  ], o = [
    "Directly manipulate CSS custom properties",
    "Hardcode colors that don't adapt to themes",
    "Override theme state without using setters",
    "Ignore RTL support for international apps",
    "Disable all settings without providing alternatives",
    "Use arbitrary hex values instead of design tokens",
    "Assign layouts incompatible with the current theme style"
  ];
  return /* @__PURE__ */ t(c, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Best Practices",
        description: "Recommended patterns and anti-patterns for working with the theme system effectively.",
        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(d, { 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(r, { tag: "h2", className: "mb-2", children: "Guidelines" }),
        /* @__PURE__ */ e(
          r,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Follow these patterns to keep your theming consistent and maintainable"
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Do's", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
          /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
        ] }, a)) }) }) }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(n, { title: "Don'ts", children: /* @__PURE__ */ e("ul", { className: "space-y-2", children: o.map((s, a) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
          /* @__PURE__ */ e("span", { className: "text-sm", children: s })
        ] }, a)) }) }) })
      ] })
    ] })
  ] });
};
export {
  N as default
};
