Estado de vista.

<section class="ui-sample ui-feedback ui-state" data-ui-state="empty" role="status" aria-live="polite"><h3>No hay resultados</h3><p>Prueba otra búsqueda o quita los filtros.</p></section>

<section class="ui-sample ui-feedback ui-state border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-ui-state="empty" role="status" aria-live="polite"><h3>No hay resultados</h3><p>Prueba otra búsqueda o quita los filtros.</p></section>

import type { MouseEventHandler } from 'react';

export interface UiStateProps {
  state?: 'empty' | 'loading' | 'error';
  title?: string;
  description?: string;
  action?: { label: string; href?: string; onClick?: MouseEventHandler<HTMLElement> };
  className?: string;
}

/** Estado de una vista, con explicación y salida. El consumidor controla la operación. */
export function UiState({state='empty',title,description,action,className}:UiStateProps){
  const labels={empty:['No hay resultados','Prueba otra búsqueda o quita los filtros.'],loading:['Cargando resultados','Conservamos la vista anterior mientras esperamos.'],error:['No pudimos cargar los resultados','Conservamos la última versión disponible.']};
  return <section className={['ui-feedback ui-state',className].filter(Boolean).join(' ')} data-ui-state={state} role={state==='error'?'alert':'status'} aria-live={state==='error'?'assertive':'polite'} aria-busy={state==='loading'?true:undefined}>
    <h3>{title??labels[state][0]}</h3>
    <p>{description??labels[state][1]}</p>
    {action?.label?<div className="ui-actions">{action.href!==undefined?<a className="btn btn--secondary" href={action.href} onClick={action.onClick}>{action.label}</a>:<button className="btn btn--secondary" type="button" onClick={action.onClick}>{action.label}</button>}</div>:null}
  </section>;
}