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

CMyTapper/robucks-front/components/shop/Shop.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import styles from '@/components/shop/Shop.module.css';
+import { FC, useEffect, useRef, useState } from 'react';
+import ModalExchangeContainer from '@/components/ui/modal-exchange/ModalExchangeContainer';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import ShopItem from '@/components/shop/ShopItem';
+import { IHandleOpen } from '@/components/shop/ShopContainer';
+import { useShopItemsStore } from '@/store/shopItems.state';
+import { usePlayerStore } from '@/store/player.state';
+import { toFixed } from '@/utils/FormatNumber';
+
+interface IShop {
+    isOpen: boolean;
+    handleClose: () => void;
+    handleOpen: (data: IHandleOpen) => void;
+}
+
+const Shop: FC<IShop> = ({ isOpen, handleOpen, handleClose }) => {
+    const shopBlockRef = useRef<HTMLDivElement>(null);
+    const [isOverflow, setIsOverflow] = useState(false);
+
+    const { shopItems } = useShopItemsStore();
+    const { player } = usePlayerStore();
+
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (shopBlockRef.current) {
+                setIsOverflow(
+                    shopBlockRef.current.scrollHeight > shopBlockRef.current.clientHeight,
+                );
+            }
+        };
+
+        checkOverflow();
+
+        window.addEventListener('resize', checkOverflow);
+
+        return () => window.removeEventListener('resize', checkOverflow);
+    }, []);
+
+    return (
+        <div className={`${styles.shop} ${isOverflow ? styles.overflow : ''}`} ref={shopBlockRef}>
+            <div className={styles.content}>
+                <div className={styles.header}>
+                    <span>Магазин</span>
+                </div>
+                <div className={styles.items}>
+                    <div className={styles.itemsHeader}>
+                        <span>Товары</span>
+                        <span className={styles.itemsAll}>Все</span>
+                    </div>
+                    <div className={styles.shopItems}>
+                        {shopItems &&
+                            shopItems.map(shopItem => (
+                                <ShopItem
+                                    key={shopItem.id}
+                                    shopItem={shopItem}
+                                    handleOpen={handleOpen}
+                                />
+                            ))}
+                    </div>
+                </div>
+                <div className={styles.upgrades}>
+                    <div className={styles.upgradesTitle}>
+                        <span>Улучшения</span>
+                    </div>
+                    <div className={styles.upgradesContent}>
+                        <span>Уже скоро...</span>
+                    </div>
+                </div>
+                <ModalExchangeContainer
+                    isOpen={isOpen}
+                    balance={toFixed(player?.attributes.balance)}
+                    onClose={handleClose}
+                />
+                <ToastContainer />
+            </div>
+        </div>
+    );
+};
+
+export default Shop;