@theguild/components
Version:
43 lines (42 loc) • 2.11 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../cn";
import { Anchor } from "./anchor";
const variantStyles = {
primary: cn(
"bg-primary hover:bg-green-800 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800 dark:bg-neutral-100 dark:text-neutral-800 dark:hover:bg-white dark:hover:text-neutral-900"
),
"primary-inverted": cn(
"bg-primary hover:bg-white focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-white/40"
),
secondary: cn(
"bg-green-300 hover:bg-green-200 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-300/40"
),
"secondary-inverted": cn(
"bg-green-800 text-white hover:bg-green-700 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800/40"
),
tertiary: cn(
"bg-transparent text-green-1000 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800"
)
};
function CallToAction(props) {
const className = cn(
"relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 text-green-1000 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit dark:text-neutral-200 [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px]",
variantStyles[props.variant],
props.className
);
if ("href" in props && typeof props.href === "string") {
const { className: _12, variant: _22, children: children2, ...rest2 } = props;
return /* @__PURE__ */ jsxs(Anchor, { className, ...rest2, children: [
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
children2
] });
}
const { className: _1, variant: _2, children, ...rest } = props;
return /* @__PURE__ */ jsxs("button", { className, ...rest, children: [
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
children
] });
}
export {
CallToAction
};