import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as m, T as t, C as n, x as r, a9 as i } from "../index-sdOMz8GW.js";
import { Play as l, ExternalLink as d, Code as c } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const u = () => /* @__PURE__ */ a(s, { children: [
  /* @__PURE__ */ e(
    m,
    {
      title: "Live Demo Form",
      description: "See the form system in action with a fully functional interactive example featuring validation, error states, and submission handling.",
      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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Interactive Example" }),
      /* @__PURE__ */ e(
        t,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Navigate to the full form example to interact with all input types, validation modes, and form methods"
        }
      )
    ] }),
    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { className: "w-full p-6 sm:p-8 space-y-6", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center space-y-4", children: [
      /* @__PURE__ */ e("div", { className: "p-4 rounded-full bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800", children: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white" }) }),
      /* @__PURE__ */ a("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold text-lg", children: "Form Example Page" }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-500 dark:text-gray-400 max-w-md",
            children: "A complete form with all available input types, centralized validation, real-time error feedback, and submission handling."
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
        /* @__PURE__ */ e(r, { size: "medium", children: /* @__PURE__ */ e(i, { to: "/form-system/example", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
          "Open Form Example"
        ] }) }) }),
        /* @__PURE__ */ e(r, { size: "medium", variant: "ghost", children: /* @__PURE__ */ e(i, { to: "/form-system/code-example", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(c, { className: "w-4 h-4" }),
          "View Source Code"
        ] }) }) })
      ] })
    ] }) }) })
  ] })
] });
export {
  u as default
};
