added rankings but ugly and tired

source/components/DeviceSection.js

@@ -0,0 +1,36 @@
+// components/DeviceSection.js
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { LoadingBar } from './LoadingBar.js';
+
+function renderDeviceInfo(deviceInfo, deviceError) {
+  if (deviceError) {
+    return <Text color="red">{deviceError}</Text>;
+  }
+  if (!deviceInfo) {
+    return <Text>Chargement des informations...</Text>;
+  }
+
+  const percentage = deviceInfo.percentage;
+  if (percentage == null) {
+    return <Text>Status : {deviceInfo.status || 'N/A'}</Text>;
+  } else {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        <LoadingBar percentage={percentage} />
+        <Text>Temps restant : {deviceInfo.remainingTime || 'N/A'}</Text>
+        <Text>Status : {deviceInfo.status || 'N/A'}</Text>
+      </Box>
+    );
+  }
+}
+
+export function DeviceSection({ deviceInfo, deviceError, width }) {
+  return (
+    <Box flexDirection="column" marginTop={1} width={width}>
+      <Text color="green">Informations du device :</Text>
+      {renderDeviceInfo(deviceInfo, deviceError)}
+    </Box>
+  );
+}