misc_pterodactyl-panel/resources/scripts/components/elements/button/Button.tsx
2022-11-25 13:25:03 -07:00

48 lines
1.6 KiB
TypeScript

import { forwardRef } from 'react';
import classNames from 'classnames';
import { ButtonProps, Options } from '@/components/elements/button/types';
import styles from './style.module.css';
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ children, shape, size, variant, className, ...rest }, ref) => {
return (
<button
ref={ref}
className={classNames(
styles.button,
styles.primary,
{
[styles.secondary]: variant === Options.Variant.Secondary,
[styles.square]: shape === Options.Shape.IconSquare,
[styles.small]: size === Options.Size.Small,
[styles.large]: size === Options.Size.Large,
},
className,
)}
{...rest}
>
{children}
</button>
);
},
);
const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
// @ts-expect-error not sure how to get this correct
<Button ref={ref} className={classNames(styles.text, className)} {...props} />
));
const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
// @ts-expect-error not sure how to get this correct
<Button ref={ref} className={classNames(styles.danger, className)} {...props} />
));
const _Button = Object.assign(Button, {
Sizes: Options.Size,
Shapes: Options.Shape,
Variants: Options.Variant,
Text: TextButton,
Danger: DangerButton,
});
export default _Button;