Initial changes

src/components/buttons/ActionButton.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import Button, { ButtonVariant } from '../buttons/Button'
+
+// Define available action types
+export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
+
+interface ActionButtonProps {
+  action: ActionType
+  isInstalled: boolean
+  isWorking: boolean
+  onClick: () => void
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * Specialized button for game installation actions
+ */
+const ActionButton: FC<ActionButtonProps> = ({
+  action,
+  isInstalled,
+  isWorking,
+  onClick,
+  disabled = false,
+  className = '',
+}) => {
+  // Determine button text based on state
+  const getButtonText = () => {
+    if (isWorking) return 'Working...'
+
+    const isCream = action.includes('cream')
+    const product = isCream ? 'CreamLinux' : 'SmokeAPI'
+
+    return isInstalled ? `Uninstall ${product}` : `Install ${product}`
+  }
+
+  // Map to our button variant
+  const getButtonVariant = (): ButtonVariant => {
+    // For uninstall actions, use danger variant
+    if (isInstalled) return 'danger'
+    // For install actions, use success variant 
+    return 'success'
+  }
+
+  return (
+    <Button
+      variant={getButtonVariant()}
+      isLoading={isWorking}
+      onClick={onClick}
+      disabled={disabled || isWorking}
+      fullWidth
+      className={`action-button ${className}`}
+    >
+      {getButtonText()}
+    </Button>
+  )
+}
+
+export default ActionButton