mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-05 03:12:14 +00:00
97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { Button, CircularProgress } from "@nextui-org/react";
|
|
import type { PressEvent } from "@react-types/shared";
|
|
import clsx from "clsx";
|
|
|
|
import { NextUIColors, NextUIVariants } from "@/types";
|
|
|
|
export const buttonClasses = {
|
|
base: "px-2 inline-flex items-center justify-center relative z-0 text-center whitespace-nowrap",
|
|
primary: "bg-default-100 hover:bg-default-200 text-default-800",
|
|
secondary: "bg-prowler-grey-light dark:bg-prowler-grey-medium text-white",
|
|
action: "text-white bg-prowler-blue-smoky dark:bg-prowler-grey-medium",
|
|
dashed:
|
|
"border border-default border-dashed bg-transparent justify-center whitespace-nowrap font-medium shadow-sm hover:border-solid hover:bg-default-100 active:bg-default-200 active:border-solid",
|
|
transparent: "border-0 border-transparent bg-transparent",
|
|
disabled: "pointer-events-none opacity-40",
|
|
hover: "hover:shadow-md",
|
|
};
|
|
|
|
interface ButtonProps {
|
|
type?: "button" | "submit" | "reset";
|
|
className?: string;
|
|
variant?:
|
|
| "solid"
|
|
| "faded"
|
|
| "bordered"
|
|
| "light"
|
|
| "flat"
|
|
| "ghost"
|
|
| "dashed"
|
|
| "shadow";
|
|
color?:
|
|
| "primary"
|
|
| "secondary"
|
|
| "action"
|
|
| "success"
|
|
| "warning"
|
|
| "danger"
|
|
| "transparent";
|
|
onPress?: (e: PressEvent) => void;
|
|
children: React.ReactNode;
|
|
startContent?: React.ReactNode;
|
|
endContent?: React.ReactNode;
|
|
size?: "sm" | "md" | "lg";
|
|
radius?: "none" | "sm" | "md" | "lg" | "full";
|
|
dashed?: boolean;
|
|
disabled?: boolean;
|
|
isLoading?: boolean;
|
|
isIconOnly?: boolean;
|
|
}
|
|
|
|
export const CustomButton = ({
|
|
type = "button",
|
|
className,
|
|
variant = "solid",
|
|
color = "primary",
|
|
onPress,
|
|
children,
|
|
startContent,
|
|
endContent,
|
|
size = "md",
|
|
radius = "sm",
|
|
disabled = false,
|
|
isLoading = false,
|
|
isIconOnly,
|
|
...props
|
|
}: ButtonProps) => (
|
|
<Button
|
|
type={type}
|
|
onPress={onPress}
|
|
variant={variant as NextUIVariants}
|
|
color={color as NextUIColors}
|
|
className={clsx(
|
|
buttonClasses.base,
|
|
{
|
|
[buttonClasses.primary]: color === "primary",
|
|
[buttonClasses.secondary]: color === "secondary",
|
|
[buttonClasses.action]: color === "action",
|
|
[buttonClasses.dashed]: variant === "dashed",
|
|
[buttonClasses.transparent]: color === "transparent",
|
|
[buttonClasses.disabled]: disabled,
|
|
[buttonClasses.hover]: color !== "transparent" && !disabled,
|
|
},
|
|
className,
|
|
)}
|
|
startContent={startContent}
|
|
endContent={endContent}
|
|
size={size}
|
|
radius={radius}
|
|
spinner={<CircularProgress aria-label="Loading..." size="sm" />}
|
|
isLoading={isLoading}
|
|
isIconOnly={isIconOnly}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Button>
|
|
);
|