seti-ramesesv1/dist/components/ui/Button.js

Reusable components and context for Next.js apps

import { jsx, jsxs } from 'react/jsx-runtime';
import { clsx } from '../../node_modules/clsx/dist/clsx.js';
import 'react';
import { FiLoader } from 'react-icons/fi';
import styles from '../../styles/Button.module.css.js';

const Button = ({ children, className, variant = "text", color = "primary", size = "medium", textSize, fontWeight, textTransform, href, startIcon, endIcon, fullWidth = false, isLoading = false, loadingText, loadingIcon, disabled, ...props }) => {
    const isDisabled = disabled || isLoading;
    const variantKey = `${color}${variant.charAt(0).toUpperCase() + variant.slice(1)}`; // e.g., primaryContained
    const disabledKey = `disabled${variant.charAt(0).toUpperCase() + variant.slice(1)}`;
    const customVariant = variant === "custom";
    const sizePadding = {
        small: styles.padSmall,
        medium: styles.padMedium,
        large: styles.padLarge,
    }[size];
    const sizeText = {
        small: styles.textSmall,
        medium: styles.textMedium,
        large: styles.textLarge,
    }[size];
    const classNames = clsx(!customVariant && styles.buttonBase, !customVariant && sizePadding, !customVariant && textSize ? null : sizeText, fullWidth && styles.fullWidth, !customVariant && isDisabled ? styles[disabledKey] : styles[variantKey], className);
    const inlineStyle = {
        fontSize: textSize ? `${textSize}rem` : undefined,
        fontWeight,
        textTransform,
    };
    const iconToRender = loadingIcon ?? jsx(FiLoader, { className: "animate-spin text-current", size: 18 });
    const content = (jsxs("span", { className: "inline-flex items-center gap-1", style: inlineStyle, children: [isLoading ? iconToRender : startIcon, jsx("span", { children: isLoading ? loadingText ?? "Loading..." : children }), !isLoading && endIcon] }));
    if (href) {
        return (jsx("a", { href: isDisabled ? undefined : href, className: classNames, style: inlineStyle, "aria-disabled": isDisabled, children: content }));
    }
    return (jsx("button", { className: classNames, style: inlineStyle, disabled: isDisabled, ...props, children: content }));
};

export { Button as default };
//# sourceMappingURL=Button.js.map