Tailwind configurate

Add NavBar Component

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

@@ -1,7 +1,55 @@
+'use client'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { FaTasks, FaUserFriends } from 'react-icons/fa'
+import { GiMining } from 'react-icons/gi'
+import { IoLogoGameControllerA } from 'react-icons/io'
+import { MdMenu } from 'react-icons/md'
+
 export default function NavBar() {
+  const location = usePathname()
+  const navItems = [
+    {
+      name: 'Games',
+      href: '/games',
+      icon: <IoLogoGameControllerA className="text-2xl" />,
+    },
+    { name: 'Tasks', href: '/tasks', icon: <FaTasks className="text-2xl" /> },
+    {
+      name: 'Mining',
+      href: '/mining',
+      icon: <GiMining className="text-2xl" />,
+    },
+    {
+      name: 'Friends',
+      href: '/friends',
+      icon: <FaUserFriends className="text-2xl" />,
+    },
+    { name: 'Menu', href: '/menu', icon: <MdMenu className="text-2xl" /> },
+  ]
+
   return (
-    <div className="bottom-0 left-0 right-0 fixed flex flex-row gap-4 p-4">
-      NavBar
+    <div
+      className={`bottom-0 left-0 right-0 fixed grid grid-cols-5 grid-rows-1 gap-2 p-2 border-t border-outline`}>
+      {navItems.map((item) => (
+        <div
+          key={item.name}
+          className={`flex flex-col items-center justify-center font-[600] text-[12px] gap-1 ${
+            location !== `/app${item.href}`
+              ? 'text-on-surface-variant'
+              : 'text-on-surface'
+          }`}>
+          <Link href={`/app${item.href}`}>{item.icon}</Link>
+          <span
+            className={`px-3 py-0.5 rounded-full ${
+              location !== `/app${item.href}`
+                ? 'text-on-surface-variant'
+                : 'text-on-surface bg-secondary-container'
+            }`}>
+            {item.name}
+          </span>
+        </div>
+      ))}
     </div>
   )
 }

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

@@ -7,7 +7,7 @@ export default function MainLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="bg-[#17212b] text-white w-screen min-h-screen">
+    <div className="bg-background text-on-surface w-screen min-h-screen">
       <div className="p-4">{children}</div>
       <NavBar />
     </div>

apps/HashRateGame/tailwind.config.js

@@ -12,6 +12,106 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        primary: '#cfbcff',
+        'on-primary': '#381e72',
+        'primary-container': '#4f378a',
+        'on-primary-container': '#e9ddff',
+        'inverse-primary': '#6750A4',
+        'primary-fixed': '#EADDFF',
+        'primary-fixed-dim': '#D0BCFF',
+        'on-primary-fixed': '#21005D',
+        'on-primary-fixed-variant': '#4F378B',
+        secondary: '#cbc2db',
+        'on-secondary': '#332d41',
+        'secondary-container': '#4a4458',
+        'on-secondary-container': '#e8def8',
+        'secondary-fixed': '#E8DEF8',
+        'secondary-fixed-dim': '#CCC2DC',
+        'on-secondary-fixed': '#1D192B',
+        'on-secondary-fixed-variant': '#4A4458',
+        tertiary: '#efb8c8',
+        'on-tertiary': '#4a2532',
+        'tertiary-container': '#633b48',
+        'on-tertiary-container': '#ffdad6',
+        'tertiary-fixed': '#FFD8E4',
+        'tertiary-fixed-dim': '#EFB8C8',
+        'on-tertiary-fixed': '#31111D',
+        'on-tertiary-fixed-variant': '#633B48',
+        error: '#ffb4ab',
+        'on-error': '#690005',
+        'error-container': '#93000a',
+        'on-error-container': '#ffdad6',
+        warning: '#ffb872',
+        'on-warning': '#4a2800',
+        'warning-container': '#6a3c00',
+        'on-warning-container': '#ffdcbe',
+        success: '#5edca9',
+        'on-success': '#003825',
+        'success-container': '#005138',
+        'on-success-container': '#7cf9c4',
+        info: '#84cfff',
+        'on-info': '#00344c',
+        'info-container': '#004c6c',
+        'on-info-container': '#c7e7ff',
+        background: '#1c1b1e',
+        'on-background': '#e6e1e6',
+        surface: '#1c1b1e',
+        'on-surface': '#e6e1e6',
+        'surface-variant': '#49454e',
+        'on-surface-variant': '#cac4cf',
+        'surface-dim': '#141218',
+        'surface-bright': '#3B383E',
+        'surface-container-lowest': '#0F0D13',
+        'surface-container-low': '#1D1B20',
+        'surface-container': '#211F26',
+        'surface-container-high': '#2B2930',
+        'surface-container-highest': '#36343B',
+        'inverse-surface': '#E6E0E9',
+        'inverse-on-surface': '#322F35',
+        outline: '#948f99',
+        'outline-variant': '#49454F',
+        scrim: '#000000',
+        shadow: '#000000',
+      },
+      // Spacing
+      spacing: {
+        0: '0px',
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+      },
+      // Sizing
+      sizing: {
+        xs: '20px',
+        sm: '24px',
+        md: '28px',
+        lg: '32px',
+        xl: '36px',
+      },
+      // Radius
+      radius: {
+        xs: '2px',
+        sm: '4px',
+        md: '6px',
+        lg: '8px',
+        xl: '10px',
+      },
+      // Shadow
+      shadow: {
+        xs: '0 0 4px rgba(0, 0, 0, 0.1)',
+        sm: '0 0 8px rgba(0, 0, 0, 0.2)',
+        md: '0 0 12px rgba(0, 0, 0, 0.3)',
+        lg: '0 0 16px rgba(0, 0, 0, 0.4)',
+        xl: '0 0 20px rgba(0, 0, 0, 0.5)',
+      },
       fontFamily: {
         sans: ['var(--font-noto-sans)'],
       },

package.json

@@ -7,7 +7,8 @@
   "dependencies": {
     "next": "14.2.16",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",