diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx index 0e29e4e..1d18d05 100644 --- a/src/app/components/StatusPage.tsx +++ b/src/app/components/StatusPage.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { HardDrive, Activity, Wifi, Signal, Clock } from 'lucide-react'; import DeviceDetailOverlay from './DeviceDetailOverlay'; +import { ImageWithFallback } from './figma/ImageWithFallback'; interface StatusPageProps { config: any; @@ -40,12 +41,17 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) { { time: '14:31:58', event: 'Device reset', type: 'warning' } ]; - const stats = { - bytesRead: '2.4 MB', - bytesWritten: '156 KB', - operations: 1247, - errors: 0 - }; + + // Mock loading/progress state + const [loading, setLoading] = useState(false); + const [progress, setProgress] = useState(0.0); // 0.0 to 1.0 + + // Mock file info (replace with real data if available) + const lastFile = 'MEATLOAF MANIACS.PRG'; + const fileSize = '1.44 MB'; // Replace with real size if available + const transferSpeed = '250 KB/s'; // Replace with real speed if available + // Mock image association (replace with real logic if available) + const imageUrl = lastFile.endsWith('.d64') ? '/assets/floppy.png' : undefined; return (
@@ -128,25 +134,41 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
-
-
-
Bytes Read
-
{stats.bytesRead}
+ {/* New device info cards */} +
+
+
Last File
+
{lastFile}
-
-
Bytes Written
-
{stats.bytesWritten}
-
-
-
Operations
-
{stats.operations}
-
-
-
Errors
-
{stats.errors}
+
+
+
Size
+
{fileSize}
+
+
+
Transfer Speed
+
{transferSpeed}
+
+ {/* Progress bar (shows when loading) */} + {loading && ( +
+
+
+ )} + + {/* Image placeholder if associated */} + {imageUrl && ( +
+ +
+ )} + {/* Media switch buttons if media set is detected */} {(() => { // Media set detection logic (copied from DeviceDetailOverlay)