feat: add profile counters

src/routes/-/RootLayout/components/Header/components/Profile/Profile.module.css

@@ -50,8 +50,79 @@
     object-fit: cover;
   }
 
-  .right {
+  .level {
+    align-self: center;
+    width: 37px;
+    height: 21px;
+    border-radius: 14px;
+    background: #ac6b33;
+    box-shadow:
+      0px 0.5px 0px 0px #ffefd1 inset,
+      0px -0.5px 0px 0px #0000008c inset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -12px;
+    padding: 3px;
+  }
+
+  .levelInner {
+    width: 100%;
+    height: 100%;
+    border-radius: 40px;
+    background: #000000b3;
+    border-top: 1px solid transparent;
+    box-shadow:
+      0px 4px 2px 0px #00000040 inset,
+      0px -1px 0px 0px #fff3b5 inset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    font-size: 12px;
+  }
+
+  .balances {
     display: flex;
     flex-direction: column;
+    gap: 4px;
+  }
+
+  .balanceRow {
+    width: 124px;
+    height: 22px;
+    border-radius: 17px;
+    background: #00000099;
+    box-shadow:
+      0px -2px 0px 0px #b0703d inset,
+      2px 0px 0px 0px #b0703d inset,
+      -2px 0px 0px 0px #b0703d inset,
+      0px 2px 0px 0px #593313 inset,
+      0px 2px 2px 2px #00000059;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding-inline: 4px;
+  }
+
+  .balanceIcon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .honeyValue {
+    font-family: "BalsamiqSans", sans-serif;
+    font-weight: 700;
+    font-size: 15px;
+    color: #f7d048;
+  }
+
+  .moneyValue {
+    font-family: "BalsamiqSans", sans-serif;
+    font-weight: 700;
+    font-size: 15px;
+    color: #6cc872;
   }
 }

src/routes/-/RootLayout/components/Header/components/Profile/Profile.tsx

@@ -1,14 +1,14 @@
-import { useState } from "react";
 import classes from "./Profile.module.css";
 import { motion } from "motion/react";
 import { Liftable } from "@components/lift";
 import { useTelegramUser } from "@/tg";
+import HoneyIcon from "@components/icons/HoneyIcon";
+import MoneyIcon from "@components/icons/MoneyIcon";
+import Counter from "@components/atoms/Counter";
 
 export default function Profile() {
   const user = useTelegramUser();
 
-  const [satue, setSatue] = useState(1);
-
   return (
     <Liftable always>
       <motion.div
@@ -23,14 +23,19 @@ export default function Profile() {
               {user?.photoUrl && <img className={classes.avatarImage} src={user.photoUrl} alt="" />}
             </div>
           </div>
+          <div className={classes.level}>
+            <div className={classes.levelInner}>1</div>
+          </div>
+        </div>
+        <div className={classes.balances}>
+          <div className={classes.balanceRow}>
+            <HoneyIcon className={classes.balanceIcon} />
+            <Counter className={classes.honeyValue} value={129891} />
+          </div>
+          <div className={classes.balanceRow}>
+            <MoneyIcon className={classes.balanceIcon} />
+            <Counter className={classes.moneyValue} value={1781} />
           </div>
-        <div>
-          {satue}
-          <button onClick={() => setSatue((v) => v + 1)}>+</button>
-          <button onClick={() => setSatue((v) => v - 1)}>-</button>
-
-          <div />
-          <div />
         </div>
       </motion.div>
     </Liftable>