49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
export default function SearchState({
|
|
loading,
|
|
error,
|
|
total,
|
|
retry,
|
|
scope,
|
|
countLabel,
|
|
}: {
|
|
loading: boolean;
|
|
error?: string;
|
|
total: number;
|
|
retry: () => void;
|
|
scope?: string;
|
|
countLabel?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
role={error ? 'alert' : 'status'}
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
className="my-3 rounded border p-3"
|
|
>
|
|
{scope && <span className="font-medium">{scope}: </span>}
|
|
{loading ? (
|
|
'A pesquisar…'
|
|
) : error ? (
|
|
<>
|
|
Não foi possível concluir a pesquisa.{' '}
|
|
<button type="button" className="underline" onClick={retry}>
|
|
Tentar novamente
|
|
</button>
|
|
</>
|
|
) : total === 0 ? (
|
|
scope ? (
|
|
'Nenhuma opção encontrada'
|
|
) : (
|
|
'Não foram encontrados resultados para esta pesquisa'
|
|
)
|
|
) : countLabel ? (
|
|
`${total} ${countLabel}`
|
|
) : scope ? (
|
|
`${total} ${total === 1 ? 'opção disponível' : 'opções disponíveis'}`
|
|
) : (
|
|
`${total} ${total === 1 ? 'resultado encontrado' : 'resultados encontrados'}`
|
|
)}
|
|
</div>
|
|
);
|
|
}
|