71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import React from 'react';
|
||
import { tokenPacks, TokenPack } from '../../constants/tokenPacks';
|
||
import styles from './TokenPacksModal.module.css';
|
||
import TokenPacksList from './TokenPacksList';
|
||
|
||
interface TokenPacksModalProps {
|
||
isVisible: boolean;
|
||
onClose: () => void;
|
||
onShowAllPacks: () => void;
|
||
missingTokens: number;
|
||
onBuyPack: (packId: string) => void;
|
||
}
|
||
|
||
const TokenPacksModal: React.FC<TokenPacksModalProps> = ({
|
||
isVisible,
|
||
onClose,
|
||
onShowAllPacks,
|
||
missingTokens,
|
||
onBuyPack
|
||
}) => {
|
||
if (!isVisible) return null;
|
||
|
||
// Находим минимальный пакет, который покроет недостающие токены
|
||
const recommendedPack = tokenPacks.find(pack =>
|
||
(pack.tokens + pack.bonusTokens) >= missingTokens
|
||
) || tokenPacks[0];
|
||
|
||
// Отображаем рекомендованный пакет и следующие два
|
||
const startIndex = Math.max(
|
||
0,
|
||
tokenPacks.findIndex(pack => pack.id === recommendedPack.id)
|
||
);
|
||
const displayPacks = tokenPacks.slice(startIndex, startIndex + 3);
|
||
|
||
return (
|
||
<div className={styles.overlay} onClick={onClose}>
|
||
<div className={styles.modal} onClick={e => e.stopPropagation()}>
|
||
<h2 className={styles.title}>Недостаточно токенов для генерации</h2>
|
||
|
||
<TokenPacksList
|
||
onBuyPack={onBuyPack}
|
||
compact={true}
|
||
/>
|
||
|
||
<button
|
||
className={styles.showAllButton}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onClose();
|
||
onShowAllPacks();
|
||
}}
|
||
>
|
||
Показать все пакеты
|
||
</button>
|
||
|
||
<button
|
||
className={styles.closeButton}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onClose();
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TokenPacksModal;
|