react-trophies/dist/components/TrophyShowcase.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 TrophyShowcase component
 */
export interface TrophyShowcaseProps {
    /** Array of achievements to display in the showcase */
    achievements: AchievementDetails[];
    /** Maximum number of achievements to display */
    maxDisplay?: number;
    /** Whether to only show unlocked achievements */
    onlyShowUnlocked?: boolean;
    /** Whether to show trophy titles */
    showLabels?: boolean;
    /** Custom icons to use for achievements */
    icons?: Record<string, string>;
    /** Function to call when a trophy is clicked */
    onTrophyClick?: (achievement: AchievementDetails) => void;
    /** Custom styles for the showcase */
    customStyles?: {
        container?: React.CSSProperties;
        showcaseItem?: React.CSSProperties;
        showcaseIcon?: React.CSSProperties;
        showcaseLabel?: React.CSSProperties;
        moreIndicator?: React.CSSProperties;
    };
}
/**
 * TrophyShowcase - Displays achievements in a horizontal, scrollable showcase
 * Perfect for profile pages or headers where space is limited
 *
 * @example
 * ```tsx
 * <TrophyShowcase
 *   achievements={achievements}
 *   maxDisplay={5}
 *   onlyShowUnlocked={true}
 *   onTrophyClick={(achievement) => console.log('Trophy clicked:', achievement.achievementId)}
 * />
 * ```
 */
declare const TrophyShowcase: React.FC<TrophyShowcaseProps>;
export default TrophyShowcase;