analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
78 lines • 2.43 kB
TypeScript
import { type ReactNode } from 'react';
export interface EmptyStateProps {
/**
* Image source for the illustration (optional)
* Can be a string (URL) or a ReactNode (component)
*/
image?: string | ReactNode;
/**
* Title text to display
* @default "Nenhum dado disponível"
*/
title?: string;
/**
* Description text to display below the title
* @default "Não há dados para exibir no momento."
*/
description?: string;
/**
* Button text (optional - if not provided, button won't be displayed)
*/
buttonText?: string;
/**
* Icon to display on the left side of the button
*/
buttonIcon?: ReactNode;
/**
* Callback function when button is clicked
*/
onButtonClick?: () => void;
/**
* Button variant
* @default "solid"
*/
buttonVariant?: 'solid' | 'outline' | 'link';
/**
* Button action color
* @default "primary"
*/
buttonAction?: 'primary' | 'positive' | 'negative';
/**
* Text size variant
* @default "large"
*/
size?: 'compact' | 'large';
}
/**
* Component displayed when there is no data to show (empty state)
* Shows an illustration with customizable title, description, and optional button in horizontal layout
*
* @example
* ```tsx
* import { EmptyState } from 'analytica-frontend-lib';
* import activityImage from './assets/activity.png';
* import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
*
* // Large variant (default) - for main page empty states
* <EmptyState
* image={activityImage}
* title="Incentive sua turma ao aprendizado"
* description="Crie uma nova atividade e ajude seus alunos a colocarem o conteúdo em prática!"
* buttonText="Criar atividade"
* buttonIcon={<PlusIcon size={18} />}
* buttonVariant="outline"
* onButtonClick={handleCreateActivity}
* />
*
* // Compact variant - for inline/contextual empty states
* <EmptyState
* image={activityImage}
* title="Nenhum resultado encontrado"
* description="Utilize o filtro ao lado para encontrar questões."
* size="compact"
* />
* ```
*/
declare const EmptyState: ({ image, title, description, buttonText, buttonIcon, onButtonClick, buttonVariant, buttonAction, size, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
export default EmptyState;
//# sourceMappingURL=EmptyState.d.ts.map