"use client";

import * as React from "react";

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

export interface QuickAction {
  id: string;
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export interface QuickActionsGridProps {
  actions: QuickAction[];
  columns?: 2 | 3 | 4;
  className?: string;
}

const columnClasses = {
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-2 sm:grid-cols-4",
};

const defaultIcon = (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.6"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-5 w-5"
  >
    <path d="M12 5v14" />
    <path d="M5 12h14" />
  </svg>
);

export function QuickActionsGrid({
  actions,
  columns = 4,
  className,
}: QuickActionsGridProps) {
  return (
    <div className={cn("grid gap-3", columnClasses[columns], className)}>
      {actions.map((action) => (
        <button
          key={action.id}
          type="button"
          onClick={action.onClick}
          disabled={action.disabled}
          className={cn(
            "flex flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition",
            "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            "disabled:pointer-events-none disabled:opacity-50"
          )}
        >
          <span className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
            {action.icon ?? defaultIcon}
          </span>
          <span className="text-xs font-medium text-foreground">
            {action.label}
          </span>
        </button>
      ))}
    </div>
  );
}
Quick Actions Grid

Dependencies

Files

Installation
