generated from CubeCraft-Creations/Tracehound
CUB-194: scaffold Vite + React + TypeScript + Tailwind frontend
- Initialize Vite project with React + TypeScript + Tailwind CSS - Dark theme dashboard design (rig-dark palette, rig-accent colors) - Minimal App with RemoteRig header + 'Dashboard coming soon' placeholder - Directory structure: components, hooks, services, types, utils - TypeScript types for Camera, CameraFeed, SystemHealth, StreamConfig - Custom hooks: useCameraStatus, useSystemHealth (with mock data) - API service layer with proxy config for /api → localhost:8080 - eslint, postcss, autoprefixer configured - lucide-react icons integrated (Camera icon) - .env.example, .gitignore, tsconfig basepaths configured - Build + type-check + lint verified clean
This commit is contained in:
+46
@@ -0,0 +1,46 @@
|
||||
import { Camera } from 'lucide-react'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-rig-dark-900">
|
||||
{/* Header */}
|
||||
<header className="border-b border-rig-dark-700 bg-rig-dark-800/50 backdrop-blur-sm">
|
||||
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Camera className="h-7 w-7 text-rig-accent" />
|
||||
<h1 className="text-xl font-bold tracking-tight text-rig-dark-50">
|
||||
RemoteRig
|
||||
</h1>
|
||||
<span className="ml-2 rounded-full bg-rig-accent/10 px-2.5 py-0.5 text-xs font-medium text-rig-accent">
|
||||
Dashboard
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-rig-dark-600 bg-rig-dark-800/30 py-24 text-center">
|
||||
<Camera className="mb-4 h-12 w-12 text-rig-dark-500" />
|
||||
<h2 className="text-lg font-semibold text-rig-dark-200">
|
||||
Dashboard Coming Soon
|
||||
</h2>
|
||||
<p className="mt-2 max-w-sm text-sm text-rig-dark-400">
|
||||
Camera monitoring and remote control interface — under construction.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-rig-dark-700 bg-rig-dark-800/30">
|
||||
<div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-xs text-rig-dark-500">
|
||||
RemoteRig v0.1.0 — Multi-Camera Remote Monitoring System
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Reference in New Issue
Block a user