analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
65 lines • 2.68 kB
TypeScript
import { type HTMLAttributes } from 'react';
import type { StudentHighlightItem } from '../hooks/useStudentsHighlight';
import { type RankingVariant } from '../components/shared/RankingShared';
/**
* Re-export RankingVariant as StudentRankingVariant for backwards compatibility
*/
export type StudentRankingVariant = RankingVariant;
/**
* Re-export StudentHighlightItem as StudentRankingItem for backwards compatibility
* and direct usage with the component
*/
export type StudentRankingItem = Pick<StudentHighlightItem, 'position' | 'name' | 'percentage'>;
/**
* Props for a single ranking card
*/
export interface RankingCardProps extends HTMLAttributes<HTMLDivElement> {
/** Card title */
title: string;
/** Card variant: highlight (best students) or attention (needs attention) */
variant: RankingVariant;
/** List of students to display */
students: StudentRankingItem[];
}
/**
* Single ranking card component (can be used independently)
*/
export declare const RankingCard: ({ title, variant, students, className, ...props }: RankingCardProps) => import("react/jsx-runtime").JSX.Element;
/**
* Props for the StudentRanking component
*/
export interface StudentRankingProps extends HTMLAttributes<HTMLDivElement> {
/** Title for the highlight (best students) card */
highlightTitle?: string;
/** Title for the attention (needs attention) card */
attentionTitle?: string;
/** List of highlighted (best performing) students */
highlightStudents: StudentRankingItem[];
/** List of students needing attention (lowest performing) */
attentionStudents: StudentRankingItem[];
}
/**
* StudentRanking component - displays two cards side by side showing
* the best performing students and students that need attention.
*
* @example
* ```tsx
* <StudentRanking
* highlightTitle="Estudantes em destaque"
* attentionTitle="Estudantes precisando de atenção"
* highlightStudents={[
* { position: 1, name: 'Valentina Ribeiro', percentage: 100 },
* { position: 2, name: 'Lucas Almeida', percentage: 100 },
* { position: 3, name: 'Fernanda Costa', percentage: 100 },
* ]}
* attentionStudents={[
* { position: 1, name: 'Ricardo Silva', percentage: 80 },
* { position: 2, name: 'Juliana Santos', percentage: 50 },
* { position: 3, name: 'Gabriel Oliveira', percentage: 40 },
* ]}
* />
* ```
*/
export declare const StudentRanking: ({ highlightTitle, attentionTitle, highlightStudents, attentionStudents, className, ...props }: StudentRankingProps) => import("react/jsx-runtime").JSX.Element;
export default StudentRanking;
//# sourceMappingURL=StudentRanking.d.ts.map