import { jsxs as r, Fragment as n, jsx as a } from "react/jsx-runtime";
import { H as i, C as e, a as o, T as t, A as s, c as d } from "../index-sdOMz8GW.js";
import { LayoutGrid as l } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const y = () => /* @__PURE__ */ r(n, { children: [
  /* @__PURE__ */ a(
    i,
    {
      title: "CardContainer",
      description: `A container component that provides consistent styling and layout for
          card-based content.`,
      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(l, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ r(e, { className: "p-4", children: [
      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "Basic Card" }),
      /* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(t, { tag: "p", children: "Card content goes here" }) })
    ] }),
    /* @__PURE__ */ r(e, { className: "p-4", children: [
      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
      /* @__PURE__ */ r(e, { children: [
        /* @__PURE__ */ a(t, { tag: "h3", className: "font-bold mb-2", children: "Card Title" }),
        /* @__PURE__ */ a(t, { tag: "p", children: "This is a card with custom content including a title and description." })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ a(s, { componentName: "CardContainer" }),
  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { 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 { CardContainer, Typography } from '@e-burgos/tucu-ui';

// Basic usage
<CardContainer>
  <Typography tag="p">Card content goes here</Typography>
</CardContainer>

// With custom content
<CardContainer>
  <Typography tag="h3" className="font-bold mb-2">
    Card Title
  </Typography>
  <Typography tag="p">
    Card description and content
  </Typography>
</CardContainer>

// With custom className
<CardContainer className="bg-blue-50">
  <Typography tag="p">Custom styled card</Typography>
</CardContainer>`
    }
  ) }) }) })
] });
export {
  y as default
};
