@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
63 lines (62 loc) • 2.41 kB
JavaScript
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { clsx } from "clsx";
import { ButtonVariant } from "./types.esm.js";
import { Icon } from "../Icon/Icon.esm.js";
import { Spinner } from "@material-tailwind/react";
const Button = ({
children,
className = "bg-primary-600 text-neutral-0",
variant = ButtonVariant.DEFAULT,
loading,
spinnerColor,
...props
}) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
"button",
{
className: `flex items-center font-medium rounded-full ${clsx(className)} ${clsx(variant === ButtonVariant.CIRCLE ? "p-3" : "py-2")}`,
...props,
children: [
variant === ButtonVariant.BACK_ARROW && /* @__PURE__ */ jsx(Icon, { name: "chevron-left", width: 16, height: 16, className: "ml-3" }),
variant === ButtonVariant.CIRCLE ? /* @__PURE__ */ jsx("div", { children }) : /* @__PURE__ */ jsx(
"div",
{
className: `px-6 w-full items-center text-center ${clsx(variant === ButtonVariant.FORWARD_CIRCLED_ARROW && "pr-4")} ${clsx(variant === ButtonVariant.BACK_ARROW && "pl-2 pr-4")}`,
children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex w-fit h-fit justify-center items-center", children: [
/* @__PURE__ */ jsx("div", { className: "pointer-events-none invisible", children }),
/* @__PURE__ */ jsx("div", { className: "absolute", children: /* @__PURE__ */ jsx(
Spinner,
{
width: 16,
height: 16,
style: { color: spinnerColor }
}
) })
] }) : children
}
),
variant === ButtonVariant.FORWARD_CIRCLED_ARROW && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center bg-white rounded-full w-[53px] h-9 mr-2", children: /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: "h-[20px] w-[20px] text-black ml-1",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M9 5l7 7-7 7M16 12H4"
}
)
}
) })
]
}
) });
export {
Button
};
//# sourceMappingURL=Button.esm.js.map