63 lines
No EOL
1.5 KiB
TypeScript
63 lines
No EOL
1.5 KiB
TypeScript
import React from 'react';
|
|
import { PencilSquareIcon, XCircleIcon, EyeIcon } from '@heroicons/react/24/outline';
|
|
|
|
type ActionButtonVariant = 'edit' | 'delete' | 'view';
|
|
|
|
interface ActionButtonProps {
|
|
variant: ActionButtonVariant;
|
|
onClick: () => void;
|
|
children: React.ReactNode;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const ActionButton: React.FC<ActionButtonProps> = ({
|
|
variant,
|
|
onClick,
|
|
children,
|
|
disabled = false
|
|
}) => {
|
|
const getVariantClasses = () => {
|
|
switch (variant) {
|
|
case 'edit':
|
|
return 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200';
|
|
case 'delete':
|
|
return 'bg-red-100 text-red-800 hover:bg-red-200';
|
|
case 'view':
|
|
return 'bg-blue-100 text-blue-800 hover:bg-blue-200';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800 hover:bg-gray-200';
|
|
}
|
|
};
|
|
|
|
const getIcon = () => {
|
|
switch (variant) {
|
|
case 'edit':
|
|
return <PencilSquareIcon className="w-4 h-4" />;
|
|
case 'delete':
|
|
return <XCircleIcon className="w-4 h-4" />;
|
|
case 'view':
|
|
return <EyeIcon className="w-4 h-4" />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`
|
|
rounded-md px-2 py-1 text-xs flex items-center gap-1
|
|
transition-all duration-200 hover:opacity-90
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
cursor-pointer
|
|
${getVariantClasses()}
|
|
`}
|
|
>
|
|
{getIcon()}
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ActionButton; |