MosswartOverlord/frontend/src/components/Layout.tsx
Erik e58c05c895 feat: v2 dashboard — React + Vite parallel implementation
New modern dashboard at /v2 running alongside the existing UI at /.
Same backend, same APIs, same WebSocket — zero backend changes.

Stack: React 19 + Vite + TypeScript + Recharts
Source: frontend/ — build output: static/v2/

Phase 1 delivers:
- Character overview cards in a responsive CSS Grid
  - Live HP/Stamina/Mana bars via WebSocket vitals
  - Kills/hr, total kills, deaths, session uptime
  - VTank state badge (Combat/Nav/Idle)
  - Location coordinates
  - Click to expand: combat stats, prismatic count, CPU/RAM
- Global stats header: active chars, total kills, total rares, server health
- WebSocket hook with auto-reconnect
- HTTP poll fallback for initial load + server health
- Mobile responsive (single column on narrow screens)
- Dark theme matching the MosswartOverlord palette

Build: cd frontend && npm run build
Access: /v2 (served by existing NoCacheStaticFiles mount)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-12 15:07:11 +02:00

23 lines
656 B
TypeScript

import React from 'react';
interface Props {
children: React.ReactNode;
}
export const Layout: React.FC<Props> = ({ children }) => {
return (
<div className="dashboard">
<header className="dashboard-header">
<h1 className="dashboard-title">Mosswart Overlord</h1>
<nav className="dashboard-nav">
<a href="/" className="nav-link">Classic View</a>
<a href="/inventory.html" className="nav-link">Inventory</a>
<a href="/suitbuilder.html" className="nav-link">Suitbuilder</a>
</nav>
</header>
<main className="dashboard-main">
{children}
</main>
</div>
);
};