@theguild/components
Version:
41 lines (40 loc) • 1.93 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../cn";
import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from "../../products";
import { CallToAction } from "../call-to-action";
import { Heading } from "../heading";
import { AncillaryProductCard, MainProductCard } from "../product-card";
function ToolsAndLibrariesCards({
className,
isHive,
...rest
}) {
return /* @__PURE__ */ jsxs(
"section",
{
className: cn(
"isolate flex flex-col gap-6 px-4 py-6 lg:gap-12 lg:py-24 xl:px-[120px]",
className
),
...rest,
children: [
/* @__PURE__ */ jsx(Heading, { as: "h2", size: "md", className: "text-green-1000", children: "Discover the complete ecosystem of tools and libraries" }),
/* @__PURE__ */ jsx("p", { className: "text-green-800", children: "Complete GraphQL Federation Stack" }),
/* @__PURE__ */ jsx("ul", { className: "-mx-12 -my-2 flex grid-cols-2 gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4", children: FOUR_MAIN_PRODUCTS.map((product) => /* @__PURE__ */ jsx(MainProductCard, { as: "li", product }, product.name)) }),
/* @__PURE__ */ jsx("p", { className: "text-green-800", children: "Our libraries to support all your GraphQL needs" }),
/* @__PURE__ */ jsx("ul", { className: "-mx-12 -my-2 flex h-max grid-cols-6 gap-[22px] overflow-x-auto overflow-y-hidden px-12 py-2 max-sm:-mx-8 max-sm:px-8 sm:grid sm:grid-cols-2 lg:grid-cols-3", children: SIX_HIGHLIGHTED_PRODUCTS.map((product) => /* @__PURE__ */ jsx(AncillaryProductCard, { as: "li", product }, product.name)) }),
/* @__PURE__ */ jsx(
CallToAction,
{
href: isHive ? "/ecosystem" : "https://the-guild.dev/graphql/hive/ecosystem",
variant: "primary",
children: "Explore the Ecosystem"
}
)
]
}
);
}
export {
ToolsAndLibrariesCards
};