@theguild/components
Version:
102 lines (101 loc) • 4.16 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../cn";
import { FOUR_MAIN_PRODUCTS, PRODUCTS } from "../../products";
import { HighlightDecoration } from "../decorations";
import { ArrowIcon } from "../icons";
import { ReactComponent as HiveDecoration } from "./hive-decoration";
import { ReactComponent as HiveGatewayDecoration } from "./hive-gateway-decoration";
import { ReactComponent as MeshDecoration } from "./mesh-decoration";
import { ReactComponent as YogaDecoration } from "./yoga-decoration";
const cardDecorations = {
[PRODUCTS.HIVE.name]: HiveDecoration,
[PRODUCTS.YOGA.name]: YogaDecoration,
[PRODUCTS.MESH.name]: MeshDecoration,
[PRODUCTS.HIVE_GATEWAY.name]: HiveGatewayDecoration
};
function MainProductCard({ as: Root, product, className, ...rest }) {
const Decoration = cardDecorations[product.name];
const Icon = product.logo;
const isHive = product.name === PRODUCTS.HIVE.name;
return /* @__PURE__ */ jsxs(
Root,
{
className: cn(
"hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 max-md:w-[283.5px]",
isHive && "bg-green-1000 text-white",
className
),
...rest,
children: [
/* @__PURE__ */ jsxs(
"a",
{
className: "relative z-10 flex h-full flex-1 flex-col justify-between p-8 outline-none focus-visible:outline-none",
href: product.href,
children: [
/* @__PURE__ */ jsx("p", { className: "font-medium", children: product.name }),
/* @__PURE__ */ jsx(Icon, { className: "mt-8" }),
/* @__PURE__ */ jsx(ArrowIcon, { className: "absolute bottom-8 right-8" })
]
}
),
/* @__PURE__ */ jsx(
Decoration,
{
strokeWidth: "0.5px",
className: cn(
"pointer-events-none absolute bottom-0 right-0 h-full fill-blue-200 opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100",
isHive && "fill-blue-700"
),
preserveAspectRatio: "xMidYMid meet"
}
),
/* @__PURE__ */ jsx(HighlightDecoration, { className: "pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" })
]
}
);
}
function AncillaryProductCard({ product, as: Root, className, ...rest }) {
const Logo = product.logo;
return /* @__PURE__ */ jsx(
Root,
{
className: cn(
"hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]",
className
),
...rest,
children: /* @__PURE__ */ jsxs(
"a",
{
href: product.href,
className: "relative flex h-full flex-col justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none",
children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("p", { className: "font-medium", children: product.name }),
/* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-green-800", children: product.title })
] }),
/* @__PURE__ */ jsx(
"div",
{
role: "presentation",
className: "mt-8 flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white",
children: /* @__PURE__ */ jsx(Logo, {})
}
),
/* @__PURE__ */ jsx(ArrowIcon, { className: "absolute bottom-8 right-8" })
]
}
)
}
);
}
function ProductCard(props) {
const isMainProduct = FOUR_MAIN_PRODUCTS.some((p) => p.name === props.product.name);
return isMainProduct ? /* @__PURE__ */ jsx(MainProductCard, { ...props }) : /* @__PURE__ */ jsx(AncillaryProductCard, { ...props });
}
export {
AncillaryProductCard,
MainProductCard,
ProductCard
};