74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { ButtonHTMLAttributes, ReactNode } from "react";
|
|
import clsx from "clsx";
|
|
import { Play, Square, Loader2 } from "lucide-react";
|
|
import styles from "@/styles/Button.module.css";
|
|
|
|
const iconMap = {
|
|
play: Play,
|
|
stop: Square,
|
|
loading: Loader2,
|
|
};
|
|
|
|
function getIcon(iconName: string) {
|
|
return iconMap[iconName as keyof typeof iconMap];
|
|
}
|
|
|
|
interface ButtonProps
|
|
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
|
|
variant?:
|
|
| "primary"
|
|
| "success"
|
|
| "danger"
|
|
| "warning"
|
|
| "info"
|
|
| "light"
|
|
| "dark";
|
|
iconLeft?: string;
|
|
iconRight?: string;
|
|
loading?: boolean;
|
|
children: ReactNode;
|
|
tooltip?: string;
|
|
type?: "submit" | "reset" | "button";
|
|
}
|
|
|
|
export function Button({
|
|
variant = "primary",
|
|
iconLeft,
|
|
iconRight,
|
|
loading = false,
|
|
children,
|
|
className,
|
|
disabled,
|
|
tooltip,
|
|
type = "button",
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={clsx(
|
|
styles.button,
|
|
styles[`is-${variant}`],
|
|
loading && styles.isLoading,
|
|
className,
|
|
)}
|
|
disabled={disabled || loading}
|
|
title={tooltip}
|
|
{...props}
|
|
>
|
|
{iconLeft && !loading && (() => {
|
|
const IconComponent = getIcon(iconLeft);
|
|
return IconComponent ? <IconComponent size={16} /> : null;
|
|
})()}
|
|
{loading && <Loader2 size={16} className={styles.spin} />}
|
|
<span>{children}</span>
|
|
{iconRight && !loading && (() => {
|
|
const IconComponent = getIcon(iconRight);
|
|
return IconComponent ? <IconComponent size={16} /> : null;
|
|
})()}
|
|
</button>
|
|
);
|
|
}
|