import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as c, C as s, a as o, T as l, ai as t, y as d, c as p, P as m, ah as h, A as f } from "../index-sdOMz8GW.js";
import { Diamond as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const v = () => /* @__PURE__ */ a(n, { children: [
  /* @__PURE__ */ e(
    c,
    {
      title: "DefiAppLogo",
      description: `An animated brain-inspired logo component designed for DeFi
          applications, featuring pulsing nodes and signal flows that represent
          financial data processing.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Animated Logo" }),
      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(t, { width: 100, height: 100 }) })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap justify-center", children: [
        /* @__PURE__ */ e(t, { width: 60, height: 60 }),
        /* @__PURE__ */ e(t, { width: 100, height: 100 }),
        /* @__PURE__ */ e(t, { width: 150, height: 150 })
      ] })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
        t,
        {
          width: 120,
          height: 120,
          className: "opacity-90 hover:opacity-100 transition-opacity"
        }
      ) })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
    {
      key: "prop",
      label: "Prop",
      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
    },
    {
      key: "type",
      label: "Type",
      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
    },
    {
      key: "default",
      label: "Default",
      render: (i) => {
        const r = String(i);
        return r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r });
      }
    },
    {
      key: "description",
      label: "Description"
    }
  ], data: [
    {
      prop: "...SVGAttributes",
      type: "React.SVGAttributes<SVGElement>",
      default: "-",
      description: "All standard SVG attributes are supported"
    }
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    p,
    {
      language: "tsx",
      code: `import { DefiAppLogo } from '@e-burgos/tucu-ui';

// Basic usage
<DefiAppLogo width={100} height={100} />

// Different sizes
<DefiAppLogo width={60} height={60} />
<DefiAppLogo width={100} height={100} />
<DefiAppLogo width={150} height={150} />

// With custom classes
<DefiAppLogo 
  width={120} 
  height={120} 
  className="opacity-90 hover:opacity-100 transition-opacity" 
/>

// With SVG attributes
<DefiAppLogo 
  width={80} 
  height={80} 
  className="custom-class"
  viewBox="0 0 100 100"
/>

// Perfect for DeFi applications
<div className="flex items-center gap-2">
  <DefiAppLogo width={40} height={40} />
  <span>My DeFi App</span>
</div>

// Features:
// - Animated pulsing nodes
// - Signal flow animations
// - Gradient colors (blue, purple, pink)
// - Perfect for financial/blockchain apps`
    }
  ) }) }) }),
  /* @__PURE__ */ e(
    m,
    {
      componentName: "TucuUiLogo",
      title: "Logo Playground",
      defaultValues: {
        size: 48
      },
      excludeProps: ["props", "className"],
      children: (i) => /* @__PURE__ */ e(h, { ...i })
    }
  ),
  /* @__PURE__ */ e(f, { componentName: "TucuUiLogo" })
] });
export {
  v as default
};
