@theguild/components/dist/components/feature-list.js

import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Anchor } from "./anchor";
import { Image } from "./image";
const FeatureList = ({
  title,
  description,
  items,
  link,
  className
}) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "container py-14", children: [
  title && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col items-center", children: [
    /* @__PURE__ */ jsx("h2", { className: "mb-1.5 mt-0 text-center text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
    description && /* @__PURE__ */ jsx("div", { className: "mb-1.5 mt-1 text-center text-base text-gray-500 dark:text-gray-400", children: description }),
    link && /* @__PURE__ */ jsx(
      Anchor,
      {
        ...link,
        className: clsx("w-max text-sm text-cyan-400 hover:text-cyan-300", link.className)
      }
    )
  ] }),
  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-12", children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col items-center", children: [
    /* @__PURE__ */ jsx(Image, { ...item.image, className: clsx("w-28", item.image.className) }),
    /* @__PURE__ */ jsx("h3", { className: "m-0 text-lg font-bold text-black dark:text-gray-50", children: item.title }),
    /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: item.description }),
    item.link && /* @__PURE__ */ jsx(
      Anchor,
      {
        ...item.link,
        className: clsx(
          "mt-2 w-max text-sm text-cyan-400 hover:text-cyan-300",
          item.link.className
        )
      }
    )
  ] }, item.title)) })
] }) });
export {
  FeatureList
};