import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
import { useState as h } from "react";
import { H as p, T as s, C as w, a as g } from "../index-sdOMz8GW.js";
import { Sparkles as N, Home as u, Menu as f, ArrowLeft as x, ArrowRight as y, ChevronUp as v, ChevronDown as C, Grid3X3 as b, List as k, Navigation as I, Plus as L, Minus as A, X as T, Check as S, Edit as E, Trash2 as D, Download as H, Upload as M, Zap as U, CheckCircle as X, AlertCircle as j, AlertTriangle as P, Info as R, Loader2 as $, Clock as F, Eye as G, EyeOff as O, Bell as q } from "lucide-react";
import "react-router-dom";
import "react-dom";
const V = () => {
  const [r, c] = h(null), l = [
    {
      category: "Navigation & Layout",
      description: "Essential navigation and layout icons",
      icon: /* @__PURE__ */ e(I, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      color: "from-blue-500 via-indigo-500 to-purple-500",
      icons: [
        { name: "Home", component: /* @__PURE__ */ e(u, { className: "w-6 h-6" }) },
        { name: "Menu", component: /* @__PURE__ */ e(f, { className: "w-6 h-6" }) },
        {
          name: "ArrowLeft",
          component: /* @__PURE__ */ e(x, { className: "w-6 h-6" })
        },
        {
          name: "ArrowRight",
          component: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
        },
        {
          name: "ChevronUp",
          component: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
        },
        {
          name: "ChevronDown",
          component: /* @__PURE__ */ e(C, { className: "w-6 h-6" })
        },
        {
          name: "Grid3X3",
          component: /* @__PURE__ */ e(b, { className: "w-6 h-6" })
        },
        { name: "List", component: /* @__PURE__ */ e(k, { className: "w-6 h-6" }) }
      ]
    },
    {
      category: "Actions & Controls",
      description: "Common action and interactive control icons",
      icon: /* @__PURE__ */ e(U, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      color: "from-purple-500 via-pink-500 to-rose-500",
      icons: [
        { name: "Plus", component: /* @__PURE__ */ e(L, { className: "w-6 h-6" }) },
        { name: "Minus", component: /* @__PURE__ */ e(A, { className: "w-6 h-6" }) },
        { name: "X", component: /* @__PURE__ */ e(T, { className: "w-6 h-6" }) },
        { name: "Check", component: /* @__PURE__ */ e(S, { className: "w-6 h-6" }) },
        { name: "Edit", component: /* @__PURE__ */ e(E, { className: "w-6 h-6" }) },
        {
          name: "Trash2",
          component: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
        },
        {
          name: "Download",
          component: /* @__PURE__ */ e(H, { className: "w-6 h-6" })
        },
        {
          name: "Upload",
          component: /* @__PURE__ */ e(M, { className: "w-6 h-6" })
        }
      ]
    },
    {
      category: "Status & Feedback",
      description: "Icons for status indicators and user feedback",
      icon: /* @__PURE__ */ e(q, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      color: "from-green-500 via-emerald-500 to-teal-500",
      icons: [
        {
          name: "CheckCircle",
          component: /* @__PURE__ */ e(X, { className: "w-6 h-6" })
        },
        {
          name: "AlertCircle",
          component: /* @__PURE__ */ e(j, { className: "w-6 h-6" })
        },
        {
          name: "AlertTriangle",
          component: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
        },
        { name: "Info", component: /* @__PURE__ */ e(R, { className: "w-6 h-6" }) },
        {
          name: "Loader2",
          component: /* @__PURE__ */ e($, { className: "w-6 h-6" })
        },
        { name: "Clock", component: /* @__PURE__ */ e(F, { className: "w-6 h-6" }) },
        { name: "Eye", component: /* @__PURE__ */ e(G, { className: "w-6 h-6" }) },
        {
          name: "EyeOff",
          component: /* @__PURE__ */ e(O, { className: "w-6 h-6" })
        }
      ]
    }
  ], i = (a) => {
    const t = `<LucideIcons.${a} className="w-6 h-6" />`;
    navigator.clipboard.writeText(t), c(a), setTimeout(() => c(null), 2e3);
  };
  return /* @__PURE__ */ o(d, { children: [
    /* @__PURE__ */ e(
      p,
      {
        title: "Lucide React Icons",
        description: "Access to 1500+ high-quality open-source icons through the LucideIcons namespace. Stroke-based, consistent, and fully compatible with Tailwind CSS.",
        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(N, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ o("section", { className: "space-y-8", children: [
      /* @__PURE__ */ o("div", { className: "text-center", children: [
        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Popular Icons" }),
        /* @__PURE__ */ e(
          s,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "A sample of commonly used Lucide icons — click to copy usage code"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-6", children: l.map((a, t) => /* @__PURE__ */ e(w, { className: "overflow-hidden", children: /* @__PURE__ */ e(g, { title: a.category, className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
        /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: `p-2 rounded-lg bg-linear-to-br ${a.color} shadow-lg`,
              children: a.icon
            }
          ),
          /* @__PURE__ */ o("div", { children: [
            /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: a.category }),
            /* @__PURE__ */ e(
              s,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: a.description
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4", children: a.icons.map((n, m) => /* @__PURE__ */ o(
          "div",
          {
            className: "flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",
            onClick: () => i(n.name),
            title: `Click to copy: LucideIcons.${n.name}`,
            children: [
              /* @__PURE__ */ e("div", { className: "text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors", children: n.component }),
              /* @__PURE__ */ e(
                s,
                {
                  tag: "span",
                  className: "text-xs text-center text-gray-500 dark:text-gray-400",
                  children: n.name
                }
              ),
              r === n.name && /* @__PURE__ */ e("div", { className: "absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-green-500 text-white text-xs rounded whitespace-nowrap z-10", children: "Copied!" })
            ]
          },
          m
        )) })
      ] }) }) }, t)) })
    ] })
  ] });
};
export {
  V as default
};
