import { jsxs as e, Fragment as i, jsx as a } from "react/jsx-runtime";
import { H as t, C as l, a as r, T as n, j as s, P as c, A as m, c as d } from "../index-sdOMz8GW.js";
import { Receipt as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const g = () => /* @__PURE__ */ e(i, { children: [
  /* @__PURE__ */ a(
    t,
    {
      title: "TransactionInfo",
      description: "Simple component for displaying transaction information with label and value. Perfect for showing blockchain transaction details.",
      icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-slate-500 via-gray-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ a(h, { 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(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(r, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ e(l, { className: "p-4", children: [
      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "With Value" }),
      /* @__PURE__ */ a(
        s,
        {
          label: "Transaction Hash",
          value: "0x1234...5678"
        }
      )
    ] }),
    /* @__PURE__ */ e(l, { className: "p-4", children: [
      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "Without Value" }),
      /* @__PURE__ */ a(s, { label: "Gas Fee" })
    ] }),
    /* @__PURE__ */ e(l, { className: "p-4", children: [
      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "Number Value" }),
      /* @__PURE__ */ a(s, { label: "Block Number", value: 12345678 })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ a(
    c,
    {
      componentName: "TransactionInfo",
      defaultValues: {
        label: "Transaction Hash",
        value: "0x1234...5678"
      },
      controlOverrides: [
        {
          name: "label",
          type: "text",
          description: "Label text for the transaction field"
        },
        {
          name: "value",
          type: "text",
          description: "Value to display (string or number)"
        }
      ],
      includeProps: ["label", "value"],
      children: (o) => /* @__PURE__ */ a("div", { className: "w-full max-w-md", children: /* @__PURE__ */ a(s, { label: o.label, value: o.value }) })
    }
  ),
  /* @__PURE__ */ a(m, { componentName: "TransactionInfo" }),
  /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    d,
    {
      language: "tsx",
      code: `import { TransactionInfo } from '@e-burgos/tucu-ui';

<TransactionInfo
  label="Transaction Hash"
  value="0x1234...5678"
/>

<TransactionInfo
  label="Gas Fee"
  // value is optional, shows "_ _" if not provided
/>

<TransactionInfo
  label="Block Number"
  value={12345678}
/>`
    }
  ) }) }) })
] });
export {
  g as default
};
