@theguild/components
Version:
42 lines (41 loc) • 1.43 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../cn";
import { Anchor } from "./anchor";
import { Stud } from "./stud";
function InfoCard({
icon,
heading,
className,
children,
scheme = "neutral",
...rest
}) {
let Root;
if ("href" in rest) {
Root = Anchor;
} else {
Root = rest.as || "div";
delete rest.as;
}
return /* @__PURE__ */ jsxs(
Root,
{
className: cn(
"p-6 md:p-12",
scheme === "neutral" && "bg-beige-100 [--color-h:theme(colors.green.1000)] [--color-text:theme(colors.green.800)] [--hover-bg:theme(colors.beige.200)] dark:bg-neutral-900 dark:[--color-h:theme(colors.white)] dark:[--color-text:theme(colors.white)] dark:[--hover-bg:theme(colors.neutral.800)]",
scheme === "green" && "bg-green-900 [--color-h:theme(colors.white)] [--color-text:theme(colors.white)] [--hover-bg:theme(colors.green.800)]",
Root === Anchor && "hive-focus block cursor-pointer duration-300 hover:bg-[--hover-bg] focus-visible:bg-[--hover-bg]",
className
),
...rest,
children: [
/* @__PURE__ */ jsx(Stud, { children: icon }),
/* @__PURE__ */ jsx("h3", { className: "mt-4 text-xl font-medium leading-[1.4] text-[--color-h] md:mt-6", children: heading }),
/* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2 text-[--color-text] md:mt-4", children })
]
}
);
}
export {
InfoCard
};