refactor stakingSourceView, add vertical navigation, other styling stuff

src/app/Components/BankAccount.tsx

@@ -1,24 +0,0 @@
-"use client";
-import React from "react";
-import { IBankAccount } from "typings";
-
-const BankAccount = (props: { account: IBankAccount }) => {
-  return (
-    <div
-      className={" bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3"}
-    >
-      <div className="text-white">
-        <span className={" font-bold"}>MoonBucks</span>
-        <h3 className="text-2xl font-bold">
-          {props.account.primaryBalance.toLocaleString("en-US", {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })}{" "}
-          kg
-        </h3>
-      </div>
-    </div>
-  );
-};
-
-export default BankAccount;

src/app/Components/BankAccountsView.tsx

@@ -1,31 +1,33 @@
 "use client";
 import React from "react";
 import { IBankAccount } from "typings";
-import BankAccount from "./BankAccount";
 import ResourceAccount from "./ResourceAccount";
+import { BiLoaderAlt } from "react-icons/bi";
 
 const BankAccountsView = (props: {
   bankAccount: IBankAccount | undefined;
   setLightBoxIsActive: () => void;
 }) => {
   if (props.bankAccount === undefined) {
-    return <p>No bankaccount</p>;
+    return (
+      <div className="m-4 rounded-lg bg-slate-700 h-20 flex items-center">
+        <BiLoaderAlt className="text-white animate-spin w-28 m-auto" />
+      </div>
+    );
   }
   return (
     <div className="p-4">
-      <div className="flex gap-8">
-        <div className="flex-1 bg-green-800 rounded-lg p-3">
+      <div className="flex items-center gap-8">
+        <div className="flex-1 border-2 border-white rounded-lg px-8 py-4">
           <div className="text-white">
-            <span className="text-green-400">Moonbucks</span>
+            <span className="text-green-600 font-bold">Moonbucks</span>
             <h3 className="text-2xl font-bold">
-              ${props.bankAccount?.primaryBalance}
+              $
+              {props.bankAccount?.primaryBalance.toLocaleString("en-US", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })}
             </h3>
-            <button
-              onClick={() => props.setLightBoxIsActive()}
-              className="px-2 text-sm mt-1 rounded-lg font-bold bg-green-400 text-green-800"
-            >
-              Sell Resources
-            </button>
           </div>
         </div>
         {props.bankAccount &&

src/app/Components/InventoryItem.tsx

@@ -37,56 +37,62 @@ const InventoryItem = (props: {
     <CardLayout>
       <div className="flex gap-4">
         <div className="flex-1">
-          <h3 className="text-xl font-bold mb-2">
+          <h3 className="text-2xl font-bold mb-2">
             {props.inventoryItem.storeItem.name}
           </h3>
           <p className="text-sm mb-3">
             {props.inventoryItem.storeItem.description}
           </p>
-          <div className="flex">
+          <p className="font-bold mt-4">Base Yield</p>
+          <p>{props.inventoryItem.storeItem.claimAmount}</p>
+          <p className="font-bold mb-1 mt-4">Tier</p>
+          <div className="flex items-center">
             {props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
               if (upgrade.tier <= currentUpgrade.tier) {
                 return (
-                  <span
-                    key={id}
-                    className="bg-green-600 px-2 py-2 border border-black"
-                  ></span>
+                  <span key={id} className="bg-green-600 px-4 py-2"></span>
                 );
               } else {
                 return (
-                  <span
-                    key={id}
-                    className="bg-slate-200 px-2 py-2 border border-black"
-                  ></span>
+                  <span key={id} className="bg-slate-200 px-4 py-2"></span>
                 );
               }
             })}
+            <p className="font-bold ml-1">(+{currentUpgrade.claimBoost})</p>
           </div>
-          <p className="font-bold mt-4">Yield</p>
-          <p>
-            {props.inventoryItem.storeItem.claimAmount} +{" "}
-            {currentUpgrade.claimBoost}
-          </p>
-          <div className="">
-            <div className="py-4 my-2">
-              {isInUse() ? (
-                <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
-                  In Use
-                </button>
-              ) : (
-                <button
-                  onClick={() =>
-                    props.upgradeInventoryItem(
-                      props.inventoryItem.id,
-                      props.inventoryItem.storeItem.id
-                    )
-                  }
-                  className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
+          <p className="font-bold mb-1 mt-4">Upgrade</p>
+          <div className="flex items-center">
+            {isInUse() ? (
+              <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
+                In Use
+              </button>
+            ) : (
+              <button
+                onClick={() =>
+                  props.upgradeInventoryItem(
+                    props.inventoryItem.id,
+                    props.inventoryItem.storeItem.id
+                  )
+                }
+                className="bg-green-600 rounded-full p-1"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2.5}
+                  stroke="currentColor"
+                  className="w-6 h-6"
                 >
-                  Upgrade | {getNextUpgradePrice()}
-                </button>
-              )}
-            </div>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
+                  />
+                </svg>
+              </button>
+            )}
+            <span className="ml-1">({getNextUpgradePrice()})</span>
           </div>
         </div>
         <div className="relative object-contain w-48 h-48">

src/app/Components/InventoryItemView.tsx

@@ -8,18 +8,20 @@ const InventoryItemView = (props: {
   upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
 }) => {
   return (
-    <div className="bg-slate-800 text-white p-4 rounded-lg">
-      <h2 className="text-2xl font-bold mb-4">Your Inventory</h2>
-      {props.inventoryItems &&
-        props.inventoryItems.length > 0 &&
-        props.inventoryItems.map((inventoryItem, id) => (
-          <InventoryItem
-            key={id}
-            inventoryItem={inventoryItem}
-            upgradeInventoryItem={props.upgradeInventoryItem}
-            stakes={props.stakes}
-          />
-        ))}
+    <div className="border-2 border-white text-white p-8 rounded-lg col-span-5">
+      <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
+      <div className="grid grid-cols-3 gap-8">
+        {props.inventoryItems &&
+          props.inventoryItems.length > 0 &&
+          props.inventoryItems.map((inventoryItem, id) => (
+            <InventoryItem
+              key={id}
+              inventoryItem={inventoryItem}
+              upgradeInventoryItem={props.upgradeInventoryItem}
+              stakes={props.stakes}
+            />
+          ))}
+      </div>
     </div>
   );
 };

src/app/Components/NavbarVertical.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+interface MenuItem {
+  name: string;
+  componentKey: string;
+}
+
+const menuItems: MenuItem[] = [
+  { name: "Moons", componentKey: "stakingsourcesview" },
+  { name: "Inventory", componentKey: "inventoryitemview" },
+  { name: "Buy Items", componentKey: "storeitemview" },
+  { name: "Sell Resources", componentKey: "resourcestore" },
+];
+
+interface NavbarProps {
+  onMenuItemClick: (componentKey: string) => void;
+  activeItem: string;
+}
+
+const NavbarVertical: React.FC<NavbarProps> = ({
+  onMenuItemClick,
+  activeItem,
+}) => {
+  return (
+    <div className="">
+      <nav className="border-2 border-white rounded-lg p-8 h-auto">
+        <ul className="">
+          {menuItems.map((item) => (
+            <li
+              key={item.componentKey}
+              className={`text-white cursor-pointer mb-1 ${
+                item.componentKey === activeItem
+                  ? "text-3xl font-bold"
+                  : "text-2xl"
+              }`}
+              onClick={() => onMenuItemClick(item.componentKey)}
+            >
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default NavbarVertical;

src/app/Components/ResourceAccount.tsx

@@ -5,12 +5,7 @@ import { resourceToBg, resourceToFc } from "../../utils/helpers";
 
 const ResourceAccount = (props: { account: IResourceAccount }) => {
   return (
-    <div
-      className={
-        resourceToBg(props.account.resourceType) +
-        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex-1"
-      }
-    >
+    <div className={"flex-1 border-2 border-white rounded-lg px-8 py-4"}>
       <div className="text-white">
         <span
           className={resourceToFc(props.account.resourceType) + " font-bold"}

src/app/Components/ResourceStore.tsx

@@ -3,10 +3,7 @@ import ResourceStoreItem from "./ResourceStoreItem";
 import { sumValues } from "../../utils/helpers";
 import { IBankAccount, IConversionPair } from "typings";
 
-const ResourceStore = (props: {
-  bankAccount: IBankAccount | undefined;
-  setLightBoxIsActive: () => void;
-}) => {
+const ResourceStore = (props: { bankAccount: IBankAccount | undefined }) => {
   const [conversionRate, setConversionRate] = useState<Number>(0.1);
   const [conversionPairs, setConversionPairs] = useState<
     IConversionPair[] | null
@@ -54,10 +51,8 @@ const ResourceStore = (props: {
   };
 
   return (
-    <div className="p-4 max-w-5xl">
-      <h1 className="text-white text-4xl font-extrabold">
-        Sell Your Resources
-      </h1>
+    <div className="bg-slate-800 rounded-lg p-4 col-span-2">
+      <h1 className="text-white text-3xl font-bold">Sell Resources</h1>
       <div className="flex gap-4 mt-4">
         <div className="flex-1">
           {props.bankAccount &&

src/app/Components/StakingSource.tsx

@@ -6,6 +6,7 @@ import {
   getObjectFromArray,
 } from "../../utils/helpers";
 import SelectDropdown from "./SelectDropdown";
+import Image from "next/image";
 
 const StakingSource = (props: {
   stakingSource: IStakingSource;
@@ -115,81 +116,99 @@ const StakingSource = (props: {
   };
 
   return (
-    <CardLayout>
-      <h3 className="text-xl font-bold mb-2">{props.stakingSource.name}</h3>
-      <p className="text-sm">{props.stakingSource.description}</p>
-      <div className="flex gap-4">
-        <div className="flex-1">
-          <p className="font-bold mt-4 mb-2">Active Drills</p>
-          {activeStakes &&
-            activeStakes.map((stake, id) => (
-              <div
-                key={id}
-                className="border border-white/20 rounded-xl p-3 mb-2 bg-black/20"
-              >
-                <p>
-                  <span className="font-bold">Drill: </span>
-                  {props.inventoryItems &&
-                    getObjectFromArray(
-                      props.inventoryItems,
-                      "id",
-                      stake.inventoryItemId
-                    )?.storeItem.name}
-                </p>
-                <p>
-                  <span className="font-bold">Resource: </span>
-                  {stake.resourceType}
-                </p>
-                <p className="mb-2">
-                  <span className="font-bold">Yield: </span>
-                  {stake.stakeAmount}
-                </p>
-                <RenderButtonOrCountdown stake={stake} />
-              </div>
-            ))}
-        </div>
-        <div className="flex-1">
-          <p className="font-bold mt-4 mb-2">Inactive Drills</p>
-          {props.inventoryItems &&
-            props.inventoryItems.map(
-              (item, id) =>
-                !isActive(item) && (
-                  <div
-                    key={id}
-                    className="border border-white/20 rounded-xl p-3 mb-2 bg-black/20"
-                  >
-                    <p className="font-bold">{item.storeItem.name}</p>
-                    <p className="mt-2">Select Resource</p>
-                    <div className="flex">
-                      <SelectDropdown
-                        options={props.stakingSource.resourceWells.map(
-                          (well): IOption => ({
-                            value: well.id,
-                            label: well.resourceType,
-                          })
-                        )}
-                        onChange={(value) =>
-                          handleSelectChange(value, item.id, item.storeItem.id)
-                        }
-                        isActive={selectedItemId === item.id}
-                      />
-                      {selectedItemId === item.id ? (
-                        <button
-                          onClick={handleStartMining}
-                          className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
-                        >
-                          Activate
-                        </button>
-                      ) : (
-                        <></>
-                      )}
+    <div className="flex justify-center items-center">
+      <div className="relative group">
+        <Image
+          src="/assets/moon_1.png"
+          alt="Moon"
+          width={props.stakingSource.size}
+          height={props.stakingSource.size}
+        />
+        <div className="absolute -right-0 top-1/2 transform -translate-y-1/2 opacity-0 w-0 group-hover:w-96 group-hover:opacity-100 transition-all duration-200 hover:ease-in-out">
+          <div className="bg-slate-900 border-2 border-white rounded-xl p-4 text-white">
+            <h3 className="text-xl font-bold mb-2">
+              {props.stakingSource.name}
+            </h3>
+            <p className="text-sm">{props.stakingSource.description}</p>
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <p className="font-bold mt-4 mb-2">Active Drills</p>
+                {activeStakes &&
+                  activeStakes.map((stake, id) => (
+                    <div
+                      key={id}
+                      className="border border-white rounded-xl p-3 mb-2 bg-black/20"
+                    >
+                      <p>
+                        <span className="font-bold">Drill: </span>
+                        {props.inventoryItems &&
+                          getObjectFromArray(
+                            props.inventoryItems,
+                            "id",
+                            stake.inventoryItemId
+                          )?.storeItem.name}
+                      </p>
+                      <p>
+                        <span className="font-bold">Resource: </span>
+                        {stake.resourceType}
+                      </p>
+                      <p className="mb-2">
+                        <span className="font-bold">Yield: </span>
+                        {stake.stakeAmount}
+                      </p>
+                      <RenderButtonOrCountdown stake={stake} />
                     </div>
-                  </div>
-                )
-            )}
+                  ))}
+              </div>
+              <div className="flex-1">
+                <p className="font-bold mt-4 mb-2">Inactive Drills</p>
+                {props.inventoryItems &&
+                  props.inventoryItems.map(
+                    (item, id) =>
+                      !isActive(item) && (
+                        <div
+                          key={id}
+                          className="border border-white rounded-xl p-3 mb-2 bg-black/20"
+                        >
+                          <p className="font-bold">{item.storeItem.name}</p>
+                          <p className="mt-2">Select Resource</p>
+                          <div className="flex">
+                            <SelectDropdown
+                              options={props.stakingSource.resourceWells.map(
+                                (well): IOption => ({
+                                  value: well.id,
+                                  label: well.resourceType,
+                                })
+                              )}
+                              onChange={(value) =>
+                                handleSelectChange(
+                                  value,
+                                  item.id,
+                                  item.storeItem.id
+                                )
+                              }
+                              isActive={selectedItemId === item.id}
+                            />
+                            {selectedItemId === item.id ? (
+                              <button
+                                onClick={handleStartMining}
+                                className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
+                              >
+                                Activate
+                              </button>
+                            ) : (
+                              <></>
+                            )}
+                          </div>
+                        </div>
+                      )
+                  )}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </CardLayout>
+    </div>
   );
 };
 

src/app/Components/StakingSourcesView.tsx

@@ -3,6 +3,79 @@ import React from "react";
 import { IInventoryItem, IStakingSource } from "typings";
 import StakingSource from "./StakingSource";
 
+const moons = [
+  {
+    name: "Caelusium",
+    description:
+      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
+    image: "/assets/moon_1.png",
+    price: 100,
+  },
+  {
+    name: "Caelusium",
+    description:
+      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
+    image: "/assets/moon_2.png",
+    price: 100,
+  },
+  {
+    name: "Caelusium",
+    description:
+      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
+    image: "/assets/moon_3.png",
+    price: 100,
+  },
+  {
+    name: "Caelusium",
+    description:
+      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
+    image: "/assets/moon_4.png",
+    price: 100,
+  },
+  {
+    name: "Caelusium",
+    description:
+      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
+    image: "/assets/moon_5.png",
+    price: 100,
+  },
+];
+
+interface RowProps {
+  stakingSources: IStakingSource[];
+  inventoryItems: IInventoryItem[];
+  claimStake: (stakingEventId: number) => void;
+  startStake: (
+    inventoryItemId: number,
+    storeItemId: string,
+    wellId: number
+  ) => void;
+}
+
+const Row: React.FC<RowProps> = ({
+  stakingSources,
+  inventoryItems,
+  claimStake,
+  startStake,
+}) => {
+  return (
+    <div className="flex justify-between items-center w-full mb-8 mt-8">
+      {stakingSources.map((stakingSource, index) => (
+        <div key={index} className="w-full">
+          <StakingSource
+            stakingSource={stakingSource}
+            inventoryItems={inventoryItems}
+            claimStake={claimStake}
+            startStake={startStake}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const moonSizes = [250, 375, 300, 225, 175, 300, 200, 150, 300, 225];
+
 const StakingSourcesView = (props: {
   stakingSources: IStakingSource[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
@@ -14,10 +87,38 @@ const StakingSourcesView = (props: {
   ) => void;
   createStakingSource: () => void;
 }) => {
+  // Generate rows of stakingSources
+  const handleRows = () => {
+    let rows = [];
+    let currentRow = [];
+    let rowSize = 3;
+    if (props.stakingSources) {
+      props.stakingSources.forEach((stakingSource, index) => {
+        currentRow.push({ ...stakingSource, size: moonSizes[index] });
+
+        if (currentRow.length === rowSize) {
+          rows.push(currentRow);
+          currentRow = [];
+          rowSize = rowSize === 3 ? 4 : 3;
+        }
+      });
+
+      if (currentRow.length) {
+        rows.push(currentRow);
+      }
+
+      return rows;
+    } else {
+      return [];
+    }
+  };
+
+  const rows = handleRows();
+
   return (
-    <div className="bg-slate-800 p-4 rounded-lg text-white">
+    <div className="border-2 border-white p-8 rounded-xl col-span-5">
       <div className="flex items-center mb-4">
-        <h2 className="text-2xl font-bold">Your Moons</h2>
+        <h2 className="text-3xl text-white font-bold">Your Moons</h2>
         <button
           className="bg-green-600 rounded-full ml-2 p-1 inline"
           onClick={() => props.createStakingSource()}
@@ -38,17 +139,15 @@ const StakingSourcesView = (props: {
           </svg>
         </button>
       </div>
-      {props.stakingSources &&
-        props.stakingSources.length > 0 &&
-        props.stakingSources.map((stakingSource, id) => (
-          <StakingSource
-            key={id}
-            stakingSource={stakingSource}
-            inventoryItems={props.inventoryItems}
-            claimStake={props.claimStake}
-            startStake={props.startStake}
-          />
-        ))}
+      {rows.map((stakingSources, index) => (
+        <Row
+          key={index}
+          stakingSources={stakingSources}
+          inventoryItems={props.inventoryItems}
+          claimStake={props.claimStake}
+          startStake={props.startStake}
+        />
+      ))}
     </div>
   );
 };

src/app/Components/StakingSourcesViewBackup.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+import { IInventoryItem, IStakingSource } from "typings";
+import StakingSource from "./StakingSource";
+
+const StakingSourcesView = (props: {
+  stakingSources: IStakingSource[] | null;
+  inventoryItems: IInventoryItem[] | null | undefined;
+  claimStake: (stakingEventId: number) => void;
+  startStake: (
+    inventoryItemId: number,
+    storeItemId: string,
+    wellId: number
+  ) => void;
+  createStakingSource: () => void;
+}) => {
+  return (
+    <div className="bg-slate-800 p-4 rounded-lg text-white col-span-5">
+      <div className="flex items-center mb-4">
+        <h2 className="text-3xl font-bold">Your Moons</h2>
+        <button
+          className="bg-green-600 rounded-full ml-2 p-1 inline"
+          onClick={() => props.createStakingSource()}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={2}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            />
+          </svg>
+        </button>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        {props.stakingSources &&
+          props.stakingSources.length > 0 &&
+          props.stakingSources.map((stakingSource, id) => (
+            <StakingSource
+              key={id}
+              stakingSource={stakingSource}
+              inventoryItems={props.inventoryItems}
+              claimStake={props.claimStake}
+              startStake={props.startStake}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default StakingSourcesView;

src/app/Components/StoreItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import { IStoreItem } from "typings";
-import CommonCardLayout from "../Layouts/CommonCardLayout";
+import CardLayout from "../Layouts/CardLayout";
 import Image from "next/image";
 
 const StoreItem = (props: {
@@ -9,7 +9,7 @@ const StoreItem = (props: {
   buyStoreItem: (itemId: string) => void;
 }) => {
   return (
-    <CommonCardLayout>
+    <CardLayout>
       <div className="flex ">
         <div className="flex-1 pr-4 mr-4">
           <h3 className="text-2xl font-bold mb-2">{props.storeItem.name}</h3>
@@ -17,7 +17,7 @@ const StoreItem = (props: {
           <div className="py-4 my-2">
             <button
               onClick={() => props.buyStoreItem(props.storeItem.id)}
-              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
+              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center"
             >
               Buy | ${props.storeItem.price}
             </button>
@@ -46,7 +46,7 @@ const StoreItem = (props: {
           />
         </div>
       </div>
-    </CommonCardLayout>
+    </CardLayout>
   );
 };
 

src/app/Components/StoreItemView.tsx

@@ -8,9 +8,9 @@ const StoreItemView = (props: {
   buyStoreItem: (itemId: string) => void;
 }) => {
   return (
-    <div className="bg-slate-800 p-4 rounded-lg">
-      <h2 className="text-2xl font-bold mb-4 text-white">Store</h2>
-      <div className="grid grid-cols-1 gap-4">
+    <div className="border-2 border-white p-8 rounded-lg col-span-5">
+      <h2 className="text-3xl font-bold mb-4 text-white">Store</h2>
+      <div className="grid grid-cols-3 gap-8">
         {props.storeItems &&
           props.storeItems.length > 0 &&
           props.storeItems

src/app/Layouts/CardLayout.tsx

@@ -4,7 +4,7 @@ export default function CardLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="rounded-lg border border-black/25 bg-slate-700 shadow-xl shadow-black/5 p-4 mb-4 text-slate-100">
+    <div className="rounded-lg border-2 border-black bg-slate-700 shadow-xl shadow-black/5 p-8 mb-4 text-slate-100">
       {children}
     </div>
   );

src/app/page.tsx

@@ -9,13 +9,13 @@ import NotificationPopover from "./Components/NotificationPopover";
 import { gameConfig } from "@/utils/gameLogic";
 import {
   IInventoryItem,
-  IStoreStakingSource,
   IStakingSource,
   IBankAccount,
   IStake,
   Notification,
 } from "typings";
 import Navbar from "./Components/Navbar";
+import NavbarVertical from "./Components/NavbarVertical";
 
 export default function Home() {
   const [inventoryItems, setInventoryItems] = useState<
@@ -32,6 +32,7 @@ export default function Home() {
   const [notificationTime, setNotificationTime] = useState(30);
   const [storeItems, setStoreItems] = useState(gameConfig.store);
   const [isLoading, setIsLoading] = useState(true);
+  const [activeComponent, setActiveComponent] = useState("stakingsourcesview");
 
   const isOwned = (storeItemId: string) => {
     if (inventoryItems && inventoryItems?.length > 0) {
@@ -298,6 +299,10 @@ export default function Home() {
     setNotification(null);
   };
 
+  const handleMenuItemClick = (componentKey: string) => {
+    setActiveComponent(componentKey);
+  };
+
   if (!userId)
     return (
       <>
@@ -310,7 +315,7 @@ export default function Home() {
     return <p>Loading...</p>;
   }
 
-  console.log(stakingSources);
+  //console.log(stakingSources);
   return (
     <>
       <Navbar setUserId={setUserId} />
@@ -324,30 +329,37 @@ export default function Home() {
         bankAccount={bankAccount}
         setLightBoxIsActive={handleSetLightBox}
       />
-      {lightBoxIsActive && (
-        <ResourceStore
-          bankAccount={bankAccount}
-          setLightBoxIsActive={handleSetLightBox}
-        />
-      )}
-      <div className="grid grid-cols-3 gap-8 p-4">
-        <StakingSourcesView
-          stakingSources={stakingSources}
-          inventoryItems={inventoryItems}
-          claimStake={claimStake}
-          startStake={startStake}
-          createStakingSource={createStakingSource}
-        />
-        <InventoryItemView
-          stakes={userStakes}
-          inventoryItems={inventoryItems}
-          upgradeInventoryItem={upgradeInventoryItem}
-        />
-        <StoreItemView
-          inventoryItems={inventoryItems}
-          storeItems={storeItems}
-          buyStoreItem={buyStoreItem}
+      <div className="grid grid-cols-6 p-4 gap-8">
+        <NavbarVertical
+          onMenuItemClick={handleMenuItemClick}
+          activeItem={activeComponent}
         />
+        {activeComponent === "stakingsourcesview" && (
+          <StakingSourcesView
+            stakingSources={stakingSources}
+            inventoryItems={inventoryItems}
+            claimStake={claimStake}
+            startStake={startStake}
+            createStakingSource={createStakingSource}
+          />
+        )}
+        {activeComponent === "inventoryitemview" && (
+          <InventoryItemView
+            stakes={userStakes}
+            inventoryItems={inventoryItems}
+            upgradeInventoryItem={upgradeInventoryItem}
+          />
+        )}
+        {activeComponent === "storeitemview" && (
+          <StoreItemView
+            inventoryItems={inventoryItems}
+            storeItems={storeItems}
+            buyStoreItem={buyStoreItem}
+          />
+        )}
+        {activeComponent === "resourcestore" && (
+          <ResourceStore bankAccount={bankAccount} />
+        )}
       </div>
     </>
   );

src/utils/helpers.ts

@@ -34,11 +34,11 @@ export function resourceToBg(resourceName: string): string {
 export function resourceToFc(resourceName: string): string {
   
   const mapping: IMapping = {
-    "Sollux": "text-teal-400",
-    "Shadowstone": "text-cyan-400",
-    "Azurium": "text-purple-300",
-    "Novafor": "text-rose-300",
-    "Nebulance": "text-rose-300"
+    "Sollux": "text-teal-600",
+    "Shadowstone": "text-cyan-600",
+    "Azurium": "text-purple-500",
+    "Novafor": "text-rose-500",
+    "Nebulance": "text-rose-500"
   }
 
   return mapping[resourceName]

typings.d.ts

@@ -34,18 +34,12 @@ export interface IStakingSource {
   description: string;
   resourceWells: IResourceWell[];
   activeStakes: IStake[];
-}
-
-export interface IStoreStakingSource {
-  id: number;
-  name: string;
-  description: string;
-  image: string
-  price: number
-  resourceChance: number
-  resourceMinStartAmount: number
-  resourceMaxStartAmount: number
-
+  image: string | null
+  price: number | null
+  resourceChance: number | null
+  resourceMinStartAmount: number | null
+  resourceMaxStartAmount: number | null
+  size: number | null
 }
 
 export interface IInventoryItem {