@theguild/components
Version:
83 lines (82 loc) • 2.93 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { isValidElement } from "react";
import clsx from "clsx";
import { Button } from "./button";
import { Image } from "./image";
const Shadow = ({ className }) => {
return /* @__PURE__ */ jsx(
"span",
{
className: clsx(
"absolute size-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl",
className
)
}
);
};
const HeroGradient = ({
title,
description,
link,
version,
colors = [],
image,
className
}) => {
return /* @__PURE__ */ jsx("section", { className: clsx("bg-white md:py-14 dark:bg-dark", className), children: /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"container relative z-0 flex max-w-[90rem] items-center gap-6 px-6 md:px-14",
image ? "py-6" : "py-14"
),
children: [
/* @__PURE__ */ jsxs(
"div",
{
className: "absolute inset-0 z-[-1] overflow-hidden bg-black md:mx-6 md:rounded-3xl dark:bg-dark",
style: { "--colorA": colors[0], "--colorB": colors[1] },
children: [
/* @__PURE__ */ jsx(Shadow, { className: "-left-10 -top-24 [background:var(--colorA)]" }),
/* @__PURE__ */ jsx(Shadow, { className: "-top-5 hidden [background:var(--colorA)] md:right-[-28rem] md:block" }),
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-31rem] right-[-22rem] [background:var(--colorB)]" }),
/* @__PURE__ */ jsx(Shadow, { className: "-left-12 bottom-[-37rem] hidden [background:var(--colorB)] md:block" })
]
}
),
/* @__PURE__ */ jsxs("div", { className: clsx("grow md:pl-6"), children: [
/* @__PURE__ */ jsx("h1", { className: "max-w-lg text-2xl font-bold text-white md:text-3xl", children: title }),
/* @__PURE__ */ jsx("p", { className: "mb-4 mt-2.5 max-w-md text-base text-white opacity-70 md:text-lg", children: description }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 text-xs md:mt-9", children: [
link && toArray(link).map((link2, i) => /* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
...link2,
className: clsx("!px-8", link2.className)
},
i
)),
version && isValidElement(version) ? version : /* @__PURE__ */ jsx("span", { className: "text-gray-50 opacity-60", children: version })
] })
] }),
image && /* @__PURE__ */ jsx(
Image,
{
...image,
className: clsx(
"hidden w-full max-w-sm select-none sm:max-w-md md:block",
image.className
)
}
)
]
}
) });
};
function toArray(input) {
return Array.isArray(input) ? input : [input];
}
export {
HeroGradient
};