added rankings but ugly and tired

source/utils/dateUtils.js

@@ -0,0 +1,22 @@
+// utils/dateUtils.js
+
+export function formatTime(date) {
+  return date.toLocaleTimeString('fr-FR', { hour12: false });
+}
+
+export function formatDate(date) {
+  return date.toLocaleDateString('fr-FR', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+
+export function formatDateTimeUTC(utcString) {
+  const date = new Date(utcString);
+  return {
+    date: formatDate(date),
+    time: formatTime(date)
+  };
+}

source/utils/weatherCodes.js

@@ -0,0 +1,32 @@
+// utils/weatherCodes.js
+
+export const weatherCodeMap = {
+  0: { desc: 'Ciel clair', color: 'yellow' },
+  1: { desc: 'Principalement clair', color: 'yellow' },
+  2: { desc: 'Partiellement nuageux', color: 'cyan' },
+  3: { desc: 'Couvert', color: 'gray' },
+  45: { desc: 'Brouillard', color: 'gray' },
+  48: { desc: 'Brouillard givrant', color: 'gray' },
+  51: { desc: 'Bruine légère', color: 'blue' },
+  53: { desc: 'Bruine modérée', color: 'blue' },
+  55: { desc: 'Bruine dense', color: 'blue' },
+  56: { desc: 'Bruine verglaçante légère', color: 'blue' },
+  57: { desc: 'Bruine verglaçante dense', color: 'blue' },
+  61: { desc: 'Pluie faible', color: 'blue' },
+  63: { desc: 'Pluie modérée', color: 'blue' },
+  65: { desc: 'Pluie forte', color: 'blue' },
+  66: { desc: 'Pluie verglaçante légère', color: 'blue' },
+  67: { desc: 'Pluie verglaçante forte', color: 'blue' },
+  71: { desc: 'Chute de neige légère', color: 'white' },
+  73: { desc: 'Chute de neige modérée', color: 'white' },
+  75: { desc: 'Chute de neige forte', color: 'white' },
+  77: { desc: 'Grains de neige', color: 'white' },
+  80: { desc: 'Averses de pluie faibles', color: 'blue' },
+  81: { desc: 'Averses de pluie modérées', color: 'blue' },
+  82: { desc: 'Averses de pluie violentes', color: 'blue' },
+  85: { desc: 'Averses de neige faibles', color: 'white' },
+  86: { desc: 'Averses de neige fortes', color: 'white' },
+  95: { desc: 'Orage', color: 'magenta' },
+  96: { desc: 'Orage avec faible grêle', color: 'magenta' },
+  99: { desc: 'Orage avec forte grêle', color: 'magenta' }
+};