Add Profile Component

Kennix88 · Dec 16, 2024 · f34f6cb · f34f6cb
1 parent 9a2090c
commit f34f6cb
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/layout.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/layout.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import '../../../global.css'
 import NavBar from './_components/NavBar'
 
@@ -8,7 +9,7 @@ export default function MainLayout({
 }) {
   return (
     <div className="bg-background text-on-surface w-screen min-h-screen">
-      <div className="p-4">{children}</div>
+      <div className="p-2">{children}</div>
       <NavBar />
     </div>
   )

diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx
@@ -0,0 +1,29 @@
+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>
+          <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>
+            <div className="flex flex-row gap-1 items-center text-gold">
+              <TbCoins className="text-lg " /> 107,021.07
+            </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>
+  )
+}
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx
@@ -1,3 +1,9 @@
+import Profile from './_components/Profile'
+
 export default function Page() {
-  return <div>Mining</div>
+  return (
+    <div>
+      <Profile />
+    </div>
+  )
 }
diff --git a/apps/HashRateGame/tailwind.config.js b/apps/HashRateGame/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        bronze: '#CD7F32',
+        silver: '#C0C0C0',
+        gold: '#FFD700',
         primary: '#cfbcff',
         'on-primary': '#381e72',
         'primary-container': '#4f378a',
@@ -62,11 +65,11 @@ module.exports = {
         'on-surface-variant': '#cac4cf',
         'surface-dim': '#141218',
         'surface-bright': '#3B383E',
-        'surface-container-lowest': '#0F0D13',
-        'surface-container-low': '#1D1B20',
+        'surface-container-l2': '#0F0D13',
+        'surface-container-l': '#1D1B20',
         'surface-container': '#211F26',
-        'surface-container-high': '#2B2930',
-        'surface-container-highest': '#36343B',
+        'surface-container-h': '#2B2930',
+        'surface-container-h2': '#36343B',
         'inverse-surface': '#E6E0E9',
         'inverse-on-surface': '#322F35',
         outline: '#948f99',