dashboard: split balance into its own component

components/dashboard/balance.tsx

@@ -0,0 +1,28 @@
+type BalanceProperty = {
+  balance: number;
+  evolution?: number;
+  price?: number;
+};
+
+const Balance = ({ balance, evolution, price }: BalanceProperty) => {
+  const isPriceIncreasing = evolution ? evolution >= 1 : false;
+  return (
+    <>
+      <div className="text-xl">Balance</div>
+      <div
+        className={`font-light ${
+          isPriceIncreasing ? "text-emerald-500" : "text-red-500"
+        }`}
+      >
+        {isPriceIncreasing ? "+" : "-"}
+        {evolution && ((evolution - 1) * 100).toFixed(2)}
+      </div>
+      <div className="font-light">{balance.toFixed(2)} XTZ</div>
+      <div className="font-light">
+        {price && (balance * price).toFixed(2)} $
+      </div>
+    </>
+  );
+};
+
+export default Balance;