react-trophies/dist/components/TrophyGrid.d.ts

Comprehensive achievement and trophy system for React apps with sound effects, notifications, theming, and visual components. Uses React, React-DOM, Sonner (toast notifications), Howler (sound effects), Zustand (state management), React-Confetti (celebrat

import React from 'react';
import { AchievementDetails } from '../types';
/**
 * Props for the TrophyGrid component
 */
export interface TrophyGridProps {
    /** Array of achievements to display in the grid */
    achievements: AchievementDetails[];
    /** Function to call when a trophy card is clicked */
    onTrophyClick?: (achievement: AchievementDetails) => void;
    /** Custom styles for the grid and its components */
    customStyles?: {
        container?: React.CSSProperties;
        emptyMessage?: React.CSSProperties;
        cardCustomStyles?: {
            container?: React.CSSProperties;
            iconContainer?: React.CSSProperties;
            icon?: React.CSSProperties;
            title?: React.CSSProperties;
            description?: React.CSSProperties;
            date?: React.CSSProperties;
            locked?: React.CSSProperties;
        };
    };
    /** Custom icons to use for achievements */
    icons?: Record<string, string>;
    /** Whether to show the achievement descriptions on cards */
    showDescriptions?: boolean;
    /** Whether to show the unlock dates on cards */
    showDates?: boolean;
    /** Whether to show locked achievements differently */
    showLocked?: boolean;
    /** Message to display when no achievements are available */
    emptyMessage?: string;
    /** Filter function to determine which achievements to display */
    filter?: (achievement: AchievementDetails) => boolean;
    /** Layout columns (responsive by default using grid-template-columns) */
    columns?: number | 'auto-fill';
    /** Min column width when using auto-fill */
    minColumnWidth?: number;
}
/**
 * TrophyGrid - A responsive grid to display multiple achievement cards
 *
 * @example
 * ```tsx
 * <TrophyGrid
 *   achievements={achievements}
 *   onTrophyClick={(achievement) => console.log('Trophy clicked:', achievement.achievementId)}
 *   showDescriptions={true}
 *   columns="auto-fill"
 *   minColumnWidth={250}
 * />
 * ```
 */
declare const TrophyGrid: React.FC<TrophyGridProps>;
export default TrophyGrid;