@theguild/components
Version:
44 lines (43 loc) • 1.65 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../cn";
import { FOUR_MAIN_PRODUCTS } from "../products";
import { Heading } from "./heading";
import { ArrowIcon } from "./icons";
import { MainProductCard } from "./product-card";
import { TextLink } from "./text-link";
function ExploreMainProductCards({
className,
isHive,
...rest
}) {
return /* @__PURE__ */ jsxs(
"section",
{
className: cn(
"relative isolate flex flex-wrap gap-6 px-4 py-6 lg:gap-12 lg:py-24 xl:px-[120px]",
className
),
...rest,
children: [
/* @__PURE__ */ jsxs("div", { className: "[@media(min-width:1490px)]:w-[293px]", children: [
/* @__PURE__ */ jsx(Heading, { as: "h2", size: "xs", className: "text-pretty", children: "Explore Hive 360\xB0 GraphQL Ecosystem to reach full potential" }),
/* @__PURE__ */ jsxs(
TextLink,
{
href: isHive ? "/ecosystem" : "https://the-guild.dev/graphql/hive/ecosystem",
className: "mt-4 lg:mt-6",
children: [
"Learn more",
/* @__PURE__ */ jsx(ArrowIcon, {})
]
}
)
] }),
/* @__PURE__ */ jsx("ul", { className: "-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden", children: FOUR_MAIN_PRODUCTS.map((product) => /* @__PURE__ */ jsx(MainProductCard, { as: "li", product }, product.name)) })
]
}
);
}
export {
ExploreMainProductCards
};