add: skin viewer, refatoring to api

src/renderer/components/TopBar.tsx

@@ -1,9 +1,10 @@
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Tab, Tabs, Typography } from '@mui/material';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { useLocation, useNavigate } from 'react-router-dom';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
+import { fetchCoins } from '../api';
 
 declare global {
   interface Window {
@@ -23,15 +24,6 @@ interface TopBarProps {
   username?: string;
 }
 
-interface CoinsResponse {
-  username: string;
-  coins: number;
-  total_time_played: {
-    seconds: number;
-    formatted: string;
-  };
-}
-
 export default function TopBar({ onRegister, username }: TopBarProps) {
   // Получаем текущий путь
   const location = useLocation();
@@ -40,6 +32,18 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const isVersionsExplorerPage = location.pathname.startsWith('/');
   const navigate = useNavigate();
   const [coins, setCoins] = useState<number>(0);
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+    if (newValue === 0) {
+      navigate('/');
+    } else if (newValue === 1) {
+      navigate('/profile');
+    } else if (newValue === 2) {
+      navigate('/shop');
+    }
+  };
 
   const handleLaunchPage = () => {
     navigate('/');
@@ -59,17 +63,12 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   };
 
   // Функция для получения количества монет
-  const fetchCoins = async () => {
+  const fetchCoinsData = async () => {
     if (!username) return;
 
     try {
-      const response = await fetch(
-        `http://147.78.65.214:8000/users/${username}/coins`,
-      );
-      if (response.ok) {
-        const data: CoinsResponse = await response.json();
-        setCoins(data.coins);
-      }
+      const coinsData = await fetchCoins(username);
+      setCoins(coinsData.coins);
     } catch (error) {
       console.error('Ошибка при получении количества монет:', error);
     }
@@ -77,8 +76,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
 
   useEffect(() => {
     if (username) {
-      fetchCoins();
-      const intervalId = setInterval(fetchCoins, 60000);
+      fetchCoinsData();
+      const intervalId = setInterval(fetchCoinsData, 60000);
       return () => clearInterval(intervalId);
     }
   }, [username]);
@@ -130,6 +129,28 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
             <ArrowBackRoundedIcon />
           </Button>
         )}
+        {!isLaunchPage && (
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs
+              value={value}
+              onChange={handleChange}
+              aria-label="basic tabs example"
+            >
+              <Tab
+                label="Версии"
+                sx={{ color: 'white', fontFamily: 'Benzin-Bold' }}
+              />
+              <Tab
+                label="Профиль"
+                sx={{ color: 'white', fontFamily: 'Benzin-Bold' }}
+              />
+              <Tab
+                label="Магазин"
+                sx={{ color: 'white', fontFamily: 'Benzin-Bold' }}
+              />
+            </Tabs>
+          </Box>
+        )}
       </Box>
       {/* Центр */}
       <Box