Initial commit: Tapalka monorepo (bot, front, strapi)

CMyTapper/robucks-front/components/friends/Friends.tsx

@@ -0,0 +1,67 @@
+'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;