spb/datacenterindex

1import { AlertTriangle, Inbox } from "lucide-react";2import type { ReactNode } from "react";3import { cn } from "./cn";45export function EmptyState({ title = "Nothing here yet", description, action, icon, className, compact }: { title?: ReactNode; description?: ReactNode; action?: ReactNode; icon?: ReactNode; className?: string; compact?: boolean }) {6  return (7    <div className={cn("flex flex-col items-center justify-center rounded-sm border border-dashed border-hair-2 text-center", compact ? "px-4 py-6" : "px-6 py-10", className)}>8      <div className="mb-2 text-ink-4">{icon ?? <Inbox className="size-5" strokeWidth={1.5} />}</div>9      <div className="text-[13.5px] font-medium text-ink-2">{title}</div>10      {description && <p className="mt-1 max-w-sm text-[12.5px] text-ink-3">{description}</p>}11      {action && <div className="mt-3">{action}</div>}12    </div>13  );14}1516export function ErrorState({ title = "Data temporarily unavailable", description = "The index API did not respond. The page will recover automatically once it is reachable.", action, className, compact, detail }: { title?: ReactNode; description?: ReactNode; action?: ReactNode; className?: string; compact?: boolean; detail?: string }) {17  return (18    <div role="status" className={cn("flex flex-col items-center justify-center rounded-sm border border-hair text-center", compact ? "px-4 py-6" : "px-6 py-10", className)}>19      <div className="mb-2 text-warn">20        <AlertTriangle className="size-5" strokeWidth={1.5} />21      </div>22      <div className="text-[13.5px] font-medium text-ink-2">{title}</div>23      {description && <p className="mt-1 max-w-sm text-[12.5px] text-ink-3">{description}</p>}24      {detail && <code className="mt-2 rounded-xs bg-surface-2 px-1.5 py-0.5 text-[11px] text-ink-3">{detail}</code>}25      {action && <div className="mt-3">{action}</div>}26    </div>27  );28}2930/** Inline offline notice shown at the top of a page when the API is down but we still render the shell. */31export function OfflineNotice({ detail, className }: { detail?: string; className?: string }) {32  return (33    <div role="status" className={cn("flex items-start gap-2 rounded-sm border border-warn/30 bg-warn/5 px-3 py-2 text-[12.5px] text-ink-2", className)}>34      <AlertTriangle className="mt-0.5 size-3.5 shrink-0 text-warn" strokeWidth={1.75} />35      <span>36        Live data is temporarily unavailable — showing the page structure without figures.37        {detail && <span className="text-ink-3"> ({detail})</span>}38      </span>39    </div>40  );41}42