import * as React from "react";

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

export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description?: string;
  icon?: React.ReactNode;
  actionLabel?: string;
  onAction?: () => void;
  action?: React.ReactNode;
}

function EmptyState({
  title,
  description,
  icon,
  actionLabel,
  onAction,
  action,
  className,
  ...props
}: EmptyStateProps) {
  const actionNode = action ??
    (actionLabel && onAction ? (
      <button
        type="button"
        onClick={onAction}
        className="inline-flex items-center justify-center rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-primary transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {actionLabel}
      </button>
    ) : null);

  return (
    <div
      className={cn(
        "flex w-full flex-col items-center justify-center rounded-2xl border border-border bg-card px-6 py-10 text-center",
        className
      )}
      {...props}
    >
      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground">
        {icon ?? (
          <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            className="h-7 w-7"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M4 7h8l2 2h6v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" />
            <path d="M2 9h20" />
          </svg>
        )}
      </div>
      <div className="mt-4 space-y-2">
        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
        {description ? (
          <p className="text-sm text-muted-foreground">{description}</p>
        ) : null}
      </div>
      {actionNode ? <div className="mt-6">{actionNode}</div> : null}
    </div>
  );
}

export { EmptyState };
Empty State

No reports yet

Dependencies

Files

Installation
