chadtmiller.com/pds.js

Switch repository

Loading…

import { cn } from '#/lib/utils.js';

/**
 * The empty placeholder: an icon chip, a title, and a line of guidance. Pass
 * the icon element as `icon`.
 */
export function EmptyState({ icon, title, description, className }) {
  return (
    <div
      className={cn(
        'flex min-w-0 flex-col items-center justify-center gap-2 rounded-3xl border border-input border-dashed px-6 py-12 text-center',
        className,
      )}
    >
      {icon && (
        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent text-faint [&_svg]:size-5">
          {icon}
        </div>
      )}
      {title && (
        <div className="font-medium text-foreground text-sm">{title}</div>
      )}
      {description && (
        <p className="max-w-sm text-muted-foreground text-sm leading-relaxed">
          {description}
        </p>
      )}
    </div>
  );
}