✨ Register: working order sum logic

💄 Add more icons and load them as react components

frontend/src/components/Header.module.css

@@ -0,0 +1,13 @@
+.logo {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 0 8px;
+  position: relative;
+  top: -1px
+}
+
+.navIcon {
+  position: relative;
+  top: -2px;
+}

frontend/src/components/Header.tsx

@@ -1,13 +1,66 @@
+import BarChart from "bootstrap-icons/icons/bar-chart.svg";
+import CardList from "bootstrap-icons/icons/card-list.svg";
+import House from "bootstrap-icons/icons/house.svg";
 import React from "react";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
+
+import Logo from "../assets/brick.svg";
+import styles from "./Header.module.css";
 
 export const Header: React.FC = () => {
   return (
     <header>
-      <div>Biceps Bar System - BBS</div>
-      <nav>
-        <Link to="/">Kjøp drikke</Link>
-        <Link to="/deposit">Sett inn penger</Link>
+      <nav className="navbar navbar-dark bg-dark navbar-expand-md">
+        <NavLink to="/" className="navbar-brand">
+          <span className={styles.logo}>
+            <Logo />
+          </span>
+          Biceps Bar System - BBS
+        </NavLink>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon" />
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
+          <ul className="navbar-nav">
+            <li className="nav-item">
+              <NavLink to="/" className="nav-link" activeClassName="active" exact>
+                <span className={styles.navIcon}>
+                  <House />
+                </span>{" "}
+                Kjøp drikke
+              </NavLink>
+            </li>
+            <li className="nav-item">
+              <NavLink to="/deposit" className="nav-link" activeClassName="active">
+                Sett inn penger
+              </NavLink>
+            </li>
+            <li className="nav-item">
+              <NavLink to="/log" className="nav-link" activeClassName="active">
+                <span className={styles.navIcon}>
+                  <CardList />
+                </span>{" "}
+                Logg
+              </NavLink>
+            </li>
+            <li className="nav-item">
+              <NavLink to="/stats" className="nav-link" activeClassName="active">
+                <span className={styles.navIcon}>
+                  <BarChart />
+                </span>{" "}
+                Statistikk
+              </NavLink>
+            </li>
+          </ul>
+        </div>
       </nav>
     </header>
   );

frontend/src/components/ProductCard.module.css

@@ -0,0 +1,17 @@
+.active {
+    background: green;
+}
+.product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.productText {
+    padding-top: 8px;
+}
+.productImage {
+    width: 80px;
+    height: 80px;
+    object-fit: contain;
+}

frontend/src/components/ProductCard.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import React, { MouseEventHandler } from "react";
+
+import { Product } from "../types";
+import styles from "./ProductCard.module.css";
+
+type ProductCardProps = {
+  product: Product;
+  onProduct: MouseEventHandler;
+  active: boolean;
+  amount: number;
+};
+
+export const ProductCard: React.FC<ProductCardProps> = ({ product, onProduct, amount, active = false }) => {
+  const classes = clsx(styles.product, { [styles.active]: active });
+  return (
+    <button className={classes} type="button" onClick={onProduct}>
+      <span>{amount}</span>
+      {product.imageUrl && <img src={product.imageUrl} className={styles.productImage} alt={product.name} />}
+      <span className={styles.productText}>{product.name}</span>
+    </button>
+  );
+};

frontend/src/components/UserCard.module.css

@@ -0,0 +1,20 @@
+.card {
+    display: flex;
+    flex-direction: column;
+}
+.active {
+    background: green;
+}
+.avatar {
+    border-radius: 50px;
+    height: 50px;
+    width: 50px;
+}
+.avatar svg {
+    color: #ccc;
+    height: 50px;
+    width: 50px;
+}
+.name {
+    font-weight: bold;
+}

frontend/src/components/UserCard.tsx

@@ -0,0 +1,31 @@
+import PersonFill from "bootstrap-icons/icons/person-fill.svg";
+import clsx from "clsx";
+import React, { MouseEventHandler } from "react";
+
+import { User } from "../types";
+import styles from "./UserCard.module.css";
+
+type UserCardProps = {
+  user: User | null;
+  onUser: MouseEventHandler;
+  active: boolean;
+};
+
+/** If user is null, then it's the special external user */
+export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false }) => {
+  const classes = clsx(styles.card, { [styles.active]: active });
+  return (
+    <button className={classes} onClick={onUser} type="button">
+      {user?.profile?.image && (
+        <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
+      )}
+      {!user?.profile?.image && (
+        <span className={styles.avatar}>
+          <PersonFill />
+        </span>
+      )}
+      <span className={styles.name}>{user?.firstName || "External"}</span>
+      <span className={styles.balance}>{user?.profile?.balance || ""}</span>
+    </button>
+  );
+};