@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
7 lines (6 loc) • 1.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { clsx } from "clsx";
import { ButtonVariant } from "./types";
import { Icon } from "../Icon/Icon";
import { Spinner } from "@material-tailwind/react";
export const Button = ({ children, className = "bg-primary-600 text-neutral-0", variant = ButtonVariant.DEFAULT, loading, spinnerColor, ...props }) => (_jsx(_Fragment, { children: _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 && (_jsx(Icon, { name: "chevron-left", width: 16, height: 16, className: "ml-3" })), variant === ButtonVariant.CIRCLE ? (_jsx("div", { children: children })) : (_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 ? (_jsxs("div", { className: "flex w-fit h-fit justify-center items-center", children: [_jsx("div", { className: "pointer-events-none invisible", children: children }), _jsx("div", { className: "absolute", children: _jsx(Spinner, { width: 16, height: 16, style: { color: spinnerColor } }) })] })) : (children) })), variant === ButtonVariant.FORWARD_CIRCLED_ARROW && (_jsx("span", { className: "flex items-center justify-center bg-white rounded-full w-[53px] h-9 mr-2", children: _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: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7M16 12H4" }) }) }))] }) }));