update action button interface to match the new structure

Author: sameersharmadev

frontend/src/components/ActionButton.tsx

@@ -6,11 +6,13 @@ import React, { ReactNode } from 'react'
 interface ActionButtonProps {
   url?: string
   onClick?: () => void
+  onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement | HTMLButtonElement>
   tooltipLabel?: string
   children: ReactNode
+  className?: string
 }
 
-const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel, children }) => {
+const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel, children, onKeyDown, className = '' }) => {
   const baseStyles =
     'flex items-center gap-2 px-2 py-2 rounded-md border border-[#1D7BD7] transition-all whitespace-nowrap justify-center bg-transparent text-blue-600 hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white'
 
@@ -20,18 +22,19 @@ const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel,
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className={baseStyles}
+        className={`${baseStyles} ${className}`}
         data-tooltip-id="button-tooltip"
         data-tooltip-content={tooltipLabel}
         onClick={onClick}
+        onKeyDown={onKeyDown}
         aria-label={tooltipLabel}
       >
         {children}
       </Link>
     </TooltipWrapper>
   ) : (
     <TooltipWrapper tooltipLabel={tooltipLabel}>
-      <Button onPress={onClick} className={baseStyles} aria-label={tooltipLabel}>
+      <Button onPress={onClick} onKeyDown={onKeyDown} className={`${baseStyles} ${className}`} aria-label={tooltipLabel}>
         {children}
       </Button>
     </TooltipWrapper>