dmeo-app

src/components/base/action-button/index.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from '@/utils/classnames';
+
+enum ActionButtonState {
+    Destructive = 'destructive',
+    Active = 'active',
+    Disabled = 'disabled',
+    Default = '',
+    Hover = 'hover'
+}
+
+const actionButtonVariants = cva('action-btn', {
+    variants: {
+        size: {
+            xs: 'action-btn-xs',
+            m: 'action-btn-m',
+            l: 'action-btn-l',
+            xl: 'action-btn-xl'
+        }
+    },
+    defaultVariants: {
+        size: 'm'
+    }
+});
+
+export type ActionButtonProps = {
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    state?: ActionButtonState;
+    styleCss?: CSSProperties;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof actionButtonVariants>;
+
+function getActionButtonState(state: ActionButtonState) {
+    switch (state) {
+        case ActionButtonState.Destructive:
+            return 'action-btn-destructive';
+        case ActionButtonState.Active:
+            return 'action-btn-active';
+        case ActionButtonState.Disabled:
+            return 'action-btn-disabled';
+        case ActionButtonState.Hover:
+            return 'action-btn-hover';
+        default:
+            return '';
+    }
+}
+
+const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
+    ({ className, size, state = ActionButtonState.Default, styleCss, children, ...props }, ref) => {
+        return (
+            <button
+                type="button"
+                className={classNames(actionButtonVariants({ className, size }), getActionButtonState(state))}
+                ref={ref}
+                style={styleCss}
+                {...props}
+            >
+                {children}
+            </button>
+        );
+    }
+);
+ActionButton.displayName = 'ActionButton';
+
+export default ActionButton;
+export { ActionButton, ActionButtonState, actionButtonVariants };