UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

65 lines 2.68 kB
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