Update Profile and NavBar Components

apps/HashRateGame/src/app/(telegram)/app/(main)/_components/NavBar.tsx

@@ -1,9 +1,10 @@
 'use client'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { FaTasks, FaUserFriends } from 'react-icons/fa'
+import { FaTasks } from 'react-icons/fa'
 import { GiMining } from 'react-icons/gi'
 import { IoLogoGameControllerA } from 'react-icons/io'
+import { IoStatsChart } from 'react-icons/io5'
 import { MdMenu } from 'react-icons/md'
 
 export default function NavBar() {
@@ -21,10 +22,15 @@ export default function NavBar() {
       icon: <GiMining className="text-2xl" />,
     },
     {
-      name: 'Friends',
-      href: '/friends',
-      icon: <FaUserFriends className="text-2xl" />,
+      name: 'Statystics',
+      href: '/statistics',
+      icon: <IoStatsChart className="text-2xl" />,
     },
+    // {
+    //   name: 'Friends',
+    //   href: '/friends',
+    //   icon: <FaUserFriends className="text-2xl" />,
+    // },
     { name: 'Menu', href: '/menu', icon: <MdMenu className="text-2xl" /> },
   ]
 
@@ -39,12 +45,20 @@ export default function NavBar() {
               ? 'text-on-surface-variant'
               : 'text-on-surface'
           }`}>
-          <Link href={`/app${item.href}`}>{item.icon}</Link>
-          <span
-            className={`px-3 py-0.5 rounded-full ${
+          <Link
+            className={`px-3 py-1 rounded-lg ${
               location !== `/app${item.href}`
                 ? 'text-on-surface-variant'
                 : 'text-on-surface bg-secondary-container'
+            }`}
+            href={`/app${item.href}`}>
+            {item.icon}
+          </Link>
+          <span
+            className={` ${
+              location !== `/app${item.href}`
+                ? 'text-on-surface-variant'
+                : 'text-on-surface'
             }`}>
             {item.name}
           </span>

apps/HashRateGame/src/app/(telegram)/app/(main)/layout.tsx

@@ -8,8 +8,8 @@ export default function MainLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="bg-background text-on-surface w-screen min-h-screen">
-      <div className="p-2">{children}</div>
+    <div className="bg-background text-on-surface w-screen min-h-screen tracking-wider">
+      <div className="p-4">{children}</div>
       <NavBar />
     </div>
   )

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Condition.tsx

@@ -0,0 +1,10 @@
+export default function Condition() {
+  return (
+    <div className="flex flex-col font-extralight">
+      <div className="px-4  opacity-50">Condition</div>
+      <div className="bg-surface-container-l2 p-4 rounded-md">
+        <div>Condition</div>
+      </div>
+    </div>
+  )
+}

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx

@@ -2,28 +2,42 @@ import { TbCoins } from 'react-icons/tb'
 
 export default function Profile() {
   return (
-    <div className="flex flex-row gap-2 items-center justify-between py-2 px-3 rounded-md text-on-surface bg-surface-container-l2">
-      <div className="flex flex-row gap-2 items-center">
-        <div className="flex justify-center items-center p-1 rounded-md bg-primary w-[40px] h-[40px]">
-          🤖
-        </div>
-        <div className="flex flex-col gap-1">
-          <div className="font-bold flex flex-row gap-2 text-[16px] items-center">
-            <div>Innokenty Kennix</div>
+    <>
+      <div className="flex flex-col font-extralight">
+        <div className="px-4  opacity-50">Profile</div>
+        <div className="bg-surface-container-l2 p-4 rounded-md grid grid-cols-2 gap-2 text-sm">
+          <div className="flex flex-row gap-2 flex-wrap col-span-2 items-center">
+            <div className="flex justify-center items-center p-1 rounded-md bg-primary w-[40px] h-[40px]">
+              🤖
+            </div>
+            <div className="flex flex-col gap-0">
+              <div className="font-bold flex flex-row gap-2 text-[16px] items-center">
+                <div>Innokenty Kennix</div>
+              </div>
+              <div className="text-[12px] flex flex-row gap-2 items-center ">
+                <div className="opacity-80">Level</div>
+                <div className="font-medium">99</div>
+              </div>
+            </div>
           </div>
-          <div className="text-[12px] flex flex-row gap-2 items-center ">
-            <div className="flex flex-row gap-1 items-center text-silver">
-              <TbCoins className="text-lg " /> 24,648,310.53
+          <div className="flex flex-row gap-2 flex-wrap col-span-2 items-center">
+            <div className="opacity-80">Balance</div>
+            <div className="flex flex-row gap-1 items-center text-silver text-nowrap text-[12px]">
+              <TbCoins className="text-lg " /> 24 648 310.53
             </div>
-            <div className="flex flex-row gap-1 items-center text-gold">
-              <TbCoins className="text-lg " /> 107,021.07
+            <div className="flex flex-row gap-1 items-center text-gold text-nowrap text-[12px]">
+              <TbCoins className="text-lg " /> 107 021.07
             </div>
           </div>
+          <div className="flex flex-row gap-2 col-span-2 items-center">
+            <div className="opacity-80">Energy</div>
+            <div className="bg-surface-container-h h-4 w-full flex items-center justify-start rounded-sm">
+              <div className="bg-primary h-full w-[75%] flex items-center justify-center text-on-primary font-normal rounded-sm"></div>
+            </div>
+            <div className="text-nowrap">1 647/10 500</div>
+          </div>
         </div>
       </div>
-      <div className="flex justify-center items-center p-1 rounded-full border-[3px] border-bronze text-bronze w-[40px] h-[40px] font-bold">
-        99
-      </div>
-    </div>
+    </>
   )
 }

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx

@@ -1,9 +1,11 @@
+import Condition from './_components/Condition'
 import Profile from './_components/Profile'
 
 export default function Page() {
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       <Profile />
+      <Condition />
     </div>
   )
 }

apps/HashRateGame/src/app/(telegram)/app/(main)/statistics/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Statistics</div>
+}