Commit of Current Status

components/FirmwareList.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { FirmwareUpdate } from '@/lib/api';
+import { Archive, Download, Clock } from 'lucide-react';
+
+interface FirmwareListProps {
+    updates: FirmwareUpdate[];
+}
+
+export function FirmwareList({ updates }: FirmwareListProps) {
+    return (
+        <div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl h-full">
+            <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
+                <Archive className="w-5 h-5 text-indigo-400" />
+                Firmware Versions
+            </h2>
+            <div className="overflow-x-auto">
+                <table className="w-full text-left">
+                    <thead>
+                        <tr className="border-b border-zinc-800 text-zinc-400 text-sm">
+                            <th className="pb-3 pl-2">Version</th>
+                            <th className="pb-3">Description</th>
+                            <th className="pb-3">Uploaded</th>
+                            <th className="pb-3 text-right">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-zinc-800/50">
+                        {updates.map((fw) => (
+                            <tr key={fw.id} className="text-zinc-300 hover:bg-zinc-800/30 transition-colors">
+                                <td className="py-3 pl-2">
+                                    <span className="font-mono text-indigo-300 bg-indigo-500/10 px-2 py-1 rounded border border-indigo-500/20 text-xs">
+                                        v{fw.version}
+                                    </span>
+                                </td>
+                                <td className="py-3 text-sm text-zinc-400">{fw.description || '-'}</td>
+                                <td className="py-3 text-sm text-zinc-500">
+                                    <div className="flex items-center gap-1.5">
+                                        <Clock className="w-3 h-3" />
+                                        {new Date(fw.uploadedAt).toLocaleDateString()}
+                                    </div>
+                                </td>
+                                <td className="py-3 text-right">
+                                    <a
+                                        href={`http://localhost:5000/api/vehicles/updates/${fw.id}/download`}
+                                        target="_blank"
+                                        className="inline-flex items-center gap-1.5 text-xs bg-zinc-800 hover:bg-zinc-700 text-white px-2 py-1.5 rounded transition-colors"
+                                    >
+                                        <Download className="w-3 h-3" /> Bin
+                                    </a>
+                                </td>
+                            </tr>
+                        ))}
+                        {updates.length === 0 && (
+                            <tr>
+                                <td colSpan={4} className="text-center py-8 text-zinc-500">
+                                    No firmware available.
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}