68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
'use client';
|
||
import styles from '@/components/friends/Friends.module.css';
|
||
import Image from 'next/image';
|
||
import { FC } from 'react';
|
||
import Friend from '@/components/friends/Friend';
|
||
import CopyLinkToast from '@/components/ui/copy-link-toast/CopyLinkToast';
|
||
import { usePlayerStore } from '@/store/player.state';
|
||
|
||
interface IFriends {
|
||
isVisible: boolean;
|
||
referral_fee: number | undefined;
|
||
friendsAndReferralsCount: { friendsWord: string; referralWord: string };
|
||
handleCopyInviteLink: () => Promise<void>;
|
||
handleCloseToastLink: () => void;
|
||
}
|
||
|
||
const Friends: FC<IFriends> = ({
|
||
isVisible,
|
||
referral_fee,
|
||
friendsAndReferralsCount,
|
||
handleCopyInviteLink,
|
||
handleCloseToastLink,
|
||
}) => {
|
||
const { player } = usePlayerStore();
|
||
const referrals = player?.attributes.my_referrals.data;
|
||
|
||
return (
|
||
<div className={styles.friends}>
|
||
<div className={styles.friendsTitle}>
|
||
<span>Друзья</span>
|
||
</div>
|
||
<div className={styles.content}>
|
||
<div className={styles.inviteBlock}>
|
||
<div className={styles.rewardInvite}>
|
||
<span>{referral_fee || 0}</span>
|
||
<Image
|
||
src={'/icons/robucks-icon.svg'}
|
||
alt={'robucks icon'}
|
||
width={32}
|
||
height={32}
|
||
/>
|
||
</div>
|
||
<div className={styles.inviteButtonBlock}>
|
||
<button onClick={handleCopyInviteLink}>Пригласи друга</button>
|
||
</div>
|
||
<div className={styles.infoInvite}>
|
||
<span>
|
||
Получай 10% от твоих друзей +5% от друзей реферала +2.5% от их рефералов
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className={styles.friendsListBlock}>
|
||
<div className={styles.friendsListHeader}>
|
||
<span>{friendsAndReferralsCount.friendsWord}</span>
|
||
<span>{friendsAndReferralsCount.referralWord}</span>
|
||
</div>
|
||
<div className={styles.friendsList}>
|
||
{referrals?.map(referral => <Friend key={referral.id} player={referral} />)}
|
||
</div>
|
||
</div>
|
||
<CopyLinkToast isVisible={isVisible} handleCloseToastLink={handleCloseToastLink} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Friends;
|