feat: improve stuff

.gitignore

@@ -13,3 +13,6 @@
 
 # Dependency directories (remove the comment below to include it)
 # vendor/
+
+
+frontend/icons

frontend/src/components/Currency.tsx

@@ -0,0 +1 @@
+export const Currency = () => <>$$</>;

frontend/src/components/graphs/GlobalGraph.tsx

@@ -1,5 +1,7 @@
 import { Line, LineChart, Tooltip } from "recharts";
+import { useStonkState } from "../../model/store";
 import { User } from "../../services/vo-stonks";
+import { PlayerListItem } from "../listItems/PlayerListItem";
 
 // GraphComponent used to represent progress of all users
 export type GraphProps = {};
@@ -51,14 +53,23 @@ const data = [
 ];
 
 export const GlobalGraph = (props: GraphProps) => {
+  const users = useStonkState((state) => state.sessionUsers);
   // TODO: use global state for all users here
 
   return (
-    <LineChart width={500} height={300} data={data}>
-      <Tooltip />
-      <Line type="monotone" dataKey="uv" stroke="#D043AC" strokeWidth={5} />
-      <Line type="monotone" dataKey="pv" stroke="#fff" strokeWidth={5} />
-    </LineChart>
+    <>
+      <LineChart width={500} height={300} data={data}>
+        <Tooltip />
+        <Line type="monotone" dataKey="uv" stroke="#D043AC" strokeWidth={5} />
+        <Line type="monotone" dataKey="pv" stroke="#fff" strokeWidth={5} />
+      </LineChart>
+      <ul>
+        {users?.map((user, index) => (
+          <PlayerListItem key={user.Name + index} value={user.Name} />
+        ))}
+        {/* <PlayerListItem value={"Wlad"} /> */}
+      </ul>
+    </>
   );
 };
 

frontend/src/components/listItems/PlayerListItem.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 
-export function PlayerListItem (props: {key:  React.Key | null | undefined, value: string}) {
-    const avatar = require('./../../assets/avatar.jpg') // TODO: replace with player images
+export function PlayerListItem(props: { value: string }) {
+  const avatar = require("./../../assets/avatar.jpg"); // TODO: replace with player images
 
-    return(
-        <li className="flex flex-row space-x-4 content-center" key={props.key}>
-            <img className="p-1 w-10 h-10 rounded-full ring-2 ring-gray-300 dark:ring-gray-500"
-                 src={avatar} alt="avatar"/>
-            <p>{props.value}</p>
-        </li>
-
-    )
-}
+  return (
+    <li className="flex flex-row items-center space-x-4 content-center">
+      <img
+        className="p-1 w-10 h-10 rounded-full ring-2 ring-gray-300 dark:ring-gray-500"
+        src={avatar}
+        alt="avatar"
+      />
+      <p className="text-lg">{props.value}</p>
+    </li>
+  );
+}

frontend/src/components/listItems/StonkPositionList.tsx

@@ -1,4 +1,8 @@
-import { Airplay } from "../../icons";
+import { Link } from "react-router-dom";
+import { Airplay, AtSign, X } from "../../icons";
+import SvgAtSign from "../../icons/AtSign";
+import SvgChevronRight from "../../icons/ChevronRight";
+import { getStonkUrl, Routes } from "../../router/router";
 import { StonkInfo } from "../../services/vo-stonks";
 
 export type StonkPositionListProps = { stonks: StonkInfo[] };
@@ -10,10 +14,45 @@ export const StonkPositionList = (props: StonkPositionListProps) => {
       <h2>Stonks</h2>
       <ul className="list-none">
         {props.stonks.map((stonk) => (
-          <li key={stonk.ID} className="p-4 border-t-1">
-            {stonk.ID}
-          </li>
+          <Link to={getStonkUrl(stonk.ID)}>
+            <li className="flex items-center justify-between text-lg gap-5 py-5 border-t-1">
+              <span className="flex items-center gap-1">
+                <span>{stonk.ID}</span>
+              </span>
+              <div className="flex items-center justify-end gap-5">
+                <span className="flex items-center gap-1">
+                  <span className="opacity-40">
+                    <X />
+                  </span>
+                  <span>0</span>
+                </span>
+
+                <SvgChevronRight className="opacity-40" />
+              </div>
+            </li>
+          </Link>
+          // <li key={stonk.ID} className="p-4 border-t-1">
+          //   {stonk.ID}
+          // </li>
         ))}
+        <Link to={getStonkUrl("pencil")}>
+          <li className="flex items-center justify-between text-lg gap-5 py-5 border-t-1">
+            <span className="flex items-center gap-1">
+              {/* <b>{<SvgAtSign />}</b> */}
+              <span>test</span>
+            </span>
+            <div className="flex items-center justify-end gap-5">
+              <span className="flex items-center gap-1">
+                <span className="opacity-40">
+                  <X />
+                </span>
+                <span>5</span>
+              </span>
+
+              <SvgChevronRight className="opacity-40" />
+            </div>
+          </li>
+        </Link>
       </ul>
     </>
   );

frontend/src/router/router.tsx

@@ -21,6 +21,9 @@ export enum Routes {
   Trade = "/trade",
 }
 
+export const getStonkUrl = (stonkId: string) =>
+  Routes.Detail.replace(":stonkName", stonkId);
+
 export const router = createBrowserRouter([
   {
     path: "/",

frontend/src/views/Home.tsx

@@ -8,14 +8,20 @@ import {
   YAxis,
 } from "recharts";
 import { Card } from "../components/card/Card";
+import { Currency } from "../components/Currency";
 import { GlobalGraph } from "../components/graphs/GlobalGraph";
 import { PlayerListItem } from "../components/listItems/PlayerListItem";
 import { StonkPositionList } from "../components/listItems/StonkPositionList";
+import { Plus } from "../icons";
 
 function Home() {
   return (
     <>
       <Card>
+        <h2 className="text-right font-bold text-3xl">
+          +200
+          <Currency />
+        </h2>
         {/* <ResponsiveContainer width="100%" height="100%"> */}
         <GlobalGraph />
         {/* </ResponsiveContainer> */}