diff --git a/web/index.html b/web/index.html index 34c381e..9a22a74 100644 --- a/web/index.html +++ b/web/index.html @@ -6,6 +6,10 @@ ERSN Mesh + + + diff --git a/web/package.json b/web/package.json index 12ad2c0..572d714 100644 --- a/web/package.json +++ b/web/package.json @@ -28,12 +28,14 @@ "@tanstack/react-router": "^1.116.0", "@tanstack/router-devtools": "^1.116.0", "@tanstack/router-vite-plugin": "^1.116.1", + "clsx": "^2.1.1", "leaflet": "^1.9.4", "lucide-react": "^0.503.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-leaflet": "^5.0.0", - "react-redux": "^9.2.0" + "react-redux": "^9.2.0", + "tailwind-merge": "^3.2.0" }, "devDependencies": { "@tailwindcss/vite": "^4.1.4", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 6a48abe..42337b1 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@tanstack/router-vite-plugin': specifier: ^1.116.1 version: 1.116.1(@tanstack/react-router@1.116.0)(vite@6.3.2) + clsx: + specifier: ^2.1.1 + version: 2.1.1 leaflet: specifier: ^1.9.4 version: 1.9.4 @@ -44,6 +47,9 @@ dependencies: react-redux: specifier: ^9.2.0 version: 9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1) + tailwind-merge: + specifier: ^3.2.0 + version: 3.2.0 devDependencies: '@tailwindcss/vite': @@ -3866,6 +3872,10 @@ packages: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} dev: true + /tailwind-merge@3.2.0: + resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==} + dev: false + /tailwindcss@4.1.4: resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==} diff --git a/web/src/components/ConnectionStatus.tsx b/web/src/components/ConnectionStatus.tsx index 6e011f1..6012f64 100644 --- a/web/src/components/ConnectionStatus.tsx +++ b/web/src/components/ConnectionStatus.tsx @@ -1,5 +1,6 @@ import React from "react"; import { WifiOff, Wifi, WifiLow, Activity, AlertCircle } from "lucide-react"; +import { cn } from "@/lib/cn"; interface ConnectionStatusProps { status: string; @@ -12,19 +13,19 @@ export const ConnectionStatus: React.FC = ({ const getStatusInfo = () => { if (status.includes("error") || status.includes("Error")) { return { - icon: , + icon: , text: "Connection Error", colorClass: "text-red-400", }; } else if (status.includes("Reconnecting")) { return { - icon: , + icon: , text: "Reconnecting", colorClass: "text-amber-400", }; } else if (status.includes("Connecting")) { return { - icon: , + icon: , text: "Connecting", colorClass: "text-blue-400", }; @@ -47,9 +48,11 @@ export const ConnectionStatus: React.FC = ({ const { icon, text, colorClass } = getStatusInfo(); return ( -
+
{icon} - {text} + + {text} +
); }; diff --git a/web/src/components/Nav.tsx b/web/src/components/Nav.tsx index ea7ebab..40de034 100644 --- a/web/src/components/Nav.tsx +++ b/web/src/components/Nav.tsx @@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router"; import { ConnectionStatus } from "./ConnectionStatus"; import { Separator } from "./Separator"; import { SITE_TITLE } from "../lib/config"; +import { Info, Layers, LayoutDashboard, Radio } from "lucide-react"; interface NavProps { connectionStatus: string; @@ -11,37 +12,64 @@ interface NavProps { export const Nav: React.FC = ({ connectionStatus }) => { return (