KoalaTrapLord
a5fe8cb3fa
Complete frontend rewrite from vanilla HTML/CSS/JS to React 19 + TypeScript + Tailwind CSS v4. Frontend (frontend/commander-ai-lab-ui/): - Vite + React 19 + TypeScript + Tailwind CSS v4 + React Router - 7 pages: BatchSim, Collection, Decks, AutoGen, Simulator, Coach, Training - Reusable components: Spinner, StatusBadge, CardImage, ManaSymbols, EmptyState - Full typed API client layer (8 modules matching all backend endpoints) - Recharts for mana curves, win rate charts, progress bars - Lucide icons throughout - Custom dark theme with MTG mana color tokens - Code splitting (recharts + react in separate chunks) Backend (lab_api.py): - SPA-aware static file serving with catch-all for client-side routing - Fallback to legacy ui/ folder if React dist not built - Updated startup log with SPA route list Build system: - .gitignore added (was missing - removes pyc, db, node_modules, etc.) - build-full-installer-v2.py: v23 with Node.js check + React build step - Vite build config with manual chunks for optimal loading Also includes: V3 deck generator fixes, coach improvements, DeepSeek sim modules
20 lines
636 B
TypeScript
20 lines
636 B
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon
|
|
title: string
|
|
description?: string
|
|
action?: React.ReactNode
|
|
}
|
|
|
|
export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<Icon className="w-12 h-12 text-text-tertiary mb-4" strokeWidth={1.5} />
|
|
<h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>
|
|
{description && <p className="text-sm text-text-secondary max-w-md mb-4">{description}</p>}
|
|
{action}
|
|
</div>
|
|
)
|
|
}
|