import { jsxs as s, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as d, T as l, C as t } from "../index-sdOMz8GW.js";
import { Ruler as n, Star as r } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => {
  const i = [
    {
      label: "XS",
      tailwind: "w-3 h-3",
      pixels: "12px",
      usage: "Inline text, badges, micro indicators"
    },
    {
      label: "SM",
      tailwind: "w-4 h-4",
      pixels: "16px",
      usage: "Input icons, small buttons, list markers"
    },
    {
      label: "MD",
      tailwind: "w-5 h-5",
      pixels: "20px",
      usage: "Default button icons, navigation items"
    },
    {
      label: "LG",
      tailwind: "w-6 h-6",
      pixels: "24px",
      usage: "Card headers, standalone icons, large buttons"
    },
    {
      label: "XL",
      tailwind: "w-8 h-8",
      pixels: "32px",
      usage: "Feature highlights, empty states, hero sections"
    }
  ];
  return /* @__PURE__ */ s(c, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "Icon Sizing Guide",
        description: "Consistent sizing scale for icons across different UI contexts. Use Tailwind width/height classes for predictable sizing.",
        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-violet-500 via-purple-500 to-indigo-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__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "Size Scale" }),
        /* @__PURE__ */ e(
          l,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Visual comparison of icon sizes with recommended use cases"
          }
        )
      ] }),
      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-4 sm:gap-6", children: i.map((a) => /* @__PURE__ */ s(
        "div",
        {
          className: "flex flex-col items-center text-center space-y-3",
          children: [
            /* @__PURE__ */ e("div", { className: "p-4 rounded-xl bg-gray-100 dark:bg-gray-800/50 border border-border flex items-center justify-center min-h-[80px]", children: /* @__PURE__ */ e(r, { className: a.tailwind }) }),
            /* @__PURE__ */ s("div", { className: "space-y-1", children: [
              /* @__PURE__ */ e(l, { tag: "h3", className: "font-bold text-lg", children: a.label }),
              /* @__PURE__ */ e("code", { className: "text-xs text-brand block", children: a.tailwind }),
              /* @__PURE__ */ e(
                l,
                {
                  tag: "span",
                  className: "text-xs text-gray-500 dark:text-gray-400 block",
                  children: a.pixels
                }
              )
            ] })
          ]
        },
        a.label
      )) }) }) })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "When to Use Each Size" }),
        /* @__PURE__ */ e(
          l,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Recommended contexts for each icon size"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: i.map((a) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-5 flex items-start gap-3", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ e(r, { className: a.tailwind }) }),
        /* @__PURE__ */ s("div", { className: "flex-1", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-1", children: [
            /* @__PURE__ */ e(l, { tag: "h3", className: "font-semibold", children: a.label }),
            /* @__PURE__ */ e("code", { className: "text-xs text-gray-500", children: a.tailwind })
          ] }),
          /* @__PURE__ */ e(
            l,
            {
              tag: "p",
              className: "text-sm text-gray-600 dark:text-gray-400",
              children: a.usage
            }
          )
        ] })
      ] }) }, a.label)) })
    ] })
  ] });
};
export {
  b as default
};
