spb/cancerindex

1import type { ReactNode } from 'react';2import { Database } from 'lucide-react';34/**5 * "Data not yet available" block (CLAUDE.md §281-283, §337). Never a placeholder number.6 * `knows` lists what CancerIndex does know instead, so the block is informative rather than blank.7 */8export function EmptyState({9  title = 'Data not yet available',10  children,11  knows,12  compact = false,13}: {14  title?: string;15  children?: ReactNode;16  knows?: Array<{ label: string; href?: string }>;17  compact?: boolean;18}) {19  return (20    <div role="status" className={`border border-dashed border-rule-strong bg-paper-2 ${compact ? 'px-3 py-2.5' : 'px-4 py-5'}`}>21      <div className="flex items-start gap-2.5">22        <Database aria-hidden className="mt-0.5 h-4 w-4 shrink-0 text-ink-4" />23        <div className="min-w-0">24          <p className={`font-medium text-ink-2 ${compact ? 'text-[13px]' : 'text-sm'}`}>{title}</p>25          {children ? <div className="mt-1 text-[13px] leading-relaxed text-ink-3">{children}</div> : null}26          {knows && knows.length > 0 ? (27            <div className="mt-2 text-[12.5px] text-ink-3">28              <span className="ci-kicker mr-2">What CancerIndex knows</span>29              <ul className="mt-1 flex flex-wrap gap-x-3 gap-y-1">30                {knows.map((k) => (31                  <li key={k.label}>32                    {k.href ? (33                      <a className="ci-link" href={k.href}>34                        {k.label}35                      </a>36                    ) : (37                      k.label38                    )}39                  </li>40                ))}41              </ul>42            </div>43          ) : null}44        </div>45      </div>46    </div>47  );48}49