"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

type QuickActionItem = {
  id: string
  label: string
  description?: string
  icon?: React.ReactNode
  onClick?: () => void
  href?: string
}

interface QuickActionsProps extends React.HTMLAttributes<HTMLDivElement> {
  actions: QuickActionItem[]
  columns?: 2 | 3 | 4
}

const QuickActions = React.forwardRef<HTMLDivElement, QuickActionsProps>(
  ({ actions, columns = 2, className, ...props }, ref) => {
    const columnClass =
      columns === 4
        ? "sm:grid-cols-4"
        : columns === 3
        ? "sm:grid-cols-3"
        : "sm:grid-cols-2"

    return (
      <div
        ref={ref}
        className={cn("grid grid-cols-1 gap-3", columnClass, className)}
        {...props}
      >
        {actions.map((action) => {
          const content = (
            <>
              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-card text-foreground">
                {action.icon}
              </div>
              <div className="space-y-1">
                <p className="text-sm font-semibold text-foreground">
                  {action.label}
                </p>
                {action.description ? (
                  <p className="text-xs text-muted-foreground">
                    {action.description}
                  </p>
                ) : null}
              </div>
            </>
          )

          const baseClasses =
            "flex w-full items-center gap-3 rounded-xl border border-border bg-muted p-3 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:bg-background"

          return action.href ? (
            <a
              key={action.id}
              href={action.href}
              className={baseClasses}
            >
              {content}
            </a>
          ) : (
            <button
              key={action.id}
              type="button"
              onClick={action.onClick}
              className={baseClasses}
            >
              {content}
            </button>
          )
        })}
      </div>
    )
  }
)

QuickActions.displayName = "QuickActions"

export { QuickActions }
export type { QuickActionsProps, QuickActionItem }
Quick Actions

Dependencies

Files

Installation
