refactor(ui): update ActionButton to support both links and form submit buttons and integrate into task form

app/(app)/tasks/TaskForm.tsx

@@ -5,7 +5,7 @@
 
 "use client";
 
-import { AlertCircle, X } from "lucide-react";
+import { AlertCircle, Check, X } from "lucide-react";
 import { DbTask, TaskStatus } from "@/lib/types/task";
 import { useTaskForm } from "./useTaskForm";
 import TaskHeader from "./task/TaskHeader";
@@ -98,12 +98,9 @@ export default function TaskForm({
         <ActionButton href="/dashboard" variant="secondary" icon={X}>
           Cancel
         </ActionButton>
-        <button
-          type="submit"
-          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-black bg-primary hover:bg-primary-hover active:scale-95 transition-all duration-200 cursor-pointer disabled:opacity-50"
-        >
+        <ActionButton type="submit" variant="primary" icon={Check}>
           {isEditMode ? "Save Changes" : "Create Task"}
-        </button>
+        </ActionButton>
       </div>
     </form>
   );

app/components/ui/buttons/ActionButton.tsx

@@ -4,39 +4,28 @@
  */
 
 import Link from "next/link";
-import { ReactNode } from "react";
+import { ReactNode, ButtonHTMLAttributes } from "react";
 import { LucideIcon } from "lucide-react";
 
-/**
- * Properties for the ActionButton component.
- *
- * @interface ActionButtonProps
- * @property {string} href - The target URL path or external link.
- * @property {"primary" | "secondary" | "danger"} [variant="primary"] - Visual style variant of the button.
- * @property {ReactNode} children - Button label content or child nodes.
- * @property {LucideIcon} [icon] - Optional Lucide icon component to display alongside text.
- */
-interface ActionButtonProps {
-  href: string;
+interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  href?: string;
   variant?: "primary" | "secondary" | "danger";
   children: ReactNode;
   icon?: LucideIcon;
 }
 
-/**
- * Renders an accessible link styled as an action button with hover states and optional icons.
- *
- * @param {ActionButtonProps} props - The component props.
- * @returns {JSX.Element} The rendered action button link component.
- */
 export function ActionButton({
   href,
   variant = "primary",
   children,
   icon: Icon,
+  type = "button",
+  disabled,
+  className = "",
+  ...props
 }: ActionButtonProps) {
   const baseStyles =
-    "group w-full sm:w-auto inline-flex items-center justify-center gap-2.5 font-medium transition-all duration-200 ease-out active:scale-[0.97] px-4 py-2.5 rounded-xl text-sm tracking-wide shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 cursor-pointer";
+    "group w-full sm:w-auto inline-flex items-center justify-center gap-2.5 font-medium transition-all duration-200 ease-out active:scale-[0.97] px-4 py-2.5 rounded-xl text-sm tracking-wide shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 cursor-pointer disabled:opacity-50 disabled:pointer-events-none";
 
   const variants = {
     primary:
@@ -44,15 +33,38 @@ export function ActionButton({
     secondary:
       "bg-card text-foreground border border-foreground-muted/50 hover:bg-background-muted hover:border-foreground hover:-translate-y-0.5",
     danger:
-      "bg-destructive/15 text-destructive border border-destructive/30 hover:bg-destructive hover:text-foreground hover:border-destructive hover:-translate-y-0.5",
+      "bg-destructive/15 text-destructive border border-destructive/30 hover:bg-destructive hover:text-foreground hover.border-destructive hover:-translate-y-0.5",
   };
 
-  return (
-    <Link href={href} className={`${baseStyles} ${variants[variant]}`}>
+  const combinedStyles = `${baseStyles} ${variants[variant]} ${className}`;
+
+  const content = (
+    <>
       {Icon && (
         <Icon className="w-4 h-4 transition-transform duration-200 ease-out group-hover:scale-110 shrink-0" />
       )}
       <span>{children}</span>
-    </Link>
+    </>
+  );
+
+  // If an href is passed -> Link button
+  if (href) {
+    return (
+      <Link href={href} className={combinedStyles}>
+        {content}
+      </Link>
+    );
+  }
+
+  // Otherwise, it's a real HTML button
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={combinedStyles}
+      {...props}
+    >
+      {content}
+    </button>
   );
 }