guru-connect/dashboard/src/components/ui/States.tsx

import type { ReactNode } from "react";

interface StateProps {
  title: string;
  message?: ReactNode;
  /** Optional action (e.g. a retry button). */
  action?: ReactNode;
}

/** Neutral "nothing here" placeholder. */
export function EmptyState({ title, message, action }: StateProps) {
  return (
    <div className="state">
      <div className="state__title">{title}</div>
      {message && <div className="state__msg">{message}</div>}
      {action}
    </div>
  );
}

/** Error placeholder — surfaces a failure instead of silently empty. */
export function ErrorState({ title, message, action }: StateProps) {
  return (
    <div className="state state--error" role="alert">
      <div className="state__title">{title}</div>
      {message && <div className="state__msg">{message}</div>}
      {action}
    </div>
  );
}