forked from OctoWoW/OctoLauncher
67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
import cls from 'classnames';
|
|
import { type LucideIcon } from 'lucide-react';
|
|
import { type ReactNode } from 'react';
|
|
|
|
import IconSpinner from './IconSpinner';
|
|
|
|
type Props = {
|
|
active?: boolean;
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
size?: number;
|
|
className?: cls.Value;
|
|
style?: React.CSSProperties;
|
|
} & (
|
|
| { type: 'submit'; onClick?: never }
|
|
| { type?: never; onClick: () => void }
|
|
) &
|
|
(
|
|
| { children: ReactNode; icon?: LucideIcon; title?: never }
|
|
| { children?: never; icon: LucideIcon; title: string }
|
|
);
|
|
|
|
const TextButton = ({
|
|
title,
|
|
type,
|
|
active,
|
|
loading,
|
|
disabled,
|
|
icon: Icon,
|
|
size,
|
|
onClick,
|
|
className,
|
|
children,
|
|
...props
|
|
}: Props) => (
|
|
<button
|
|
title={title ?? (typeof children === 'string' ? children : undefined)}
|
|
type={type ?? 'button'}
|
|
onClick={onClick}
|
|
tabIndex={!!loading || !!disabled ? -1 : undefined}
|
|
className={cls(
|
|
'flex cursor-pointer items-center gap-2 border-0 p-2',
|
|
className,
|
|
{
|
|
'tw-color drop-shadow-[0px_0px_10px_white]':
|
|
active && !loading && !disabled,
|
|
'pointer-events-none text-gray': !!loading || !!disabled,
|
|
'tw-hocus': !loading && !disabled
|
|
}
|
|
)}
|
|
{...props}
|
|
>
|
|
{loading ? (
|
|
<IconSpinner size={size ?? 24} strokeWidth={1.5} />
|
|
) : (
|
|
Icon && <Icon size={size} />
|
|
)}
|
|
{children && (
|
|
<span className="cursor-pointer select-none tracking-wide text-inherit [font-size:_inherit]">
|
|
{children}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
|
|
export default TextButton;
|