Refactor to use Tailwind

src/pages/Settings.jsx

@@ -16,73 +16,78 @@ const Settings = () => {
   const handleTemperatureLimitChange = (e) => setTemperatureLimit(e.target.value);
 
   return (
-    <div className="settings-container">
-      <h1 className="settings-title">Configurações Gerais</h1>
+    <div className="max-w-xl mx-auto p-5 bg-white rounded shadow">
+      <h1 className="text-2xl font-bold mb-5 text-center">Configurações Gerais</h1>
 
-      <div className="settings-item">
-        <label>Corrente Máxima de Carregamento (A):</label>
-        <div className="slider-container">
-          <input 
-            type="range" 
-            min="5" 
-            max="32" 
-            value={currentLimit} 
-            onChange={handleCurrentLimitChange} 
+      <div className="mb-5">
+        <label className="block mb-2">Corrente Máxima de Carregamento (A):</label>
+        <div className="flex items-center justify-between">
+          <input
+            type="range"
+            min="5"
+            max="32"
+            className="flex-1"
+            value={currentLimit}
+            onChange={handleCurrentLimitChange}
           />
           <span>{currentLimit} A</span>
         </div>
       </div>
 
-      <div className="settings-item">
-        <label>Limite de Potência Máxima (W):</label>
-        <div className="slider-container">
-          <input 
-            type="range" 
-            min="1000" 
-            max="10000" 
-            value={powerLimit} 
-            onChange={handlePowerLimitChange} 
+      <div className="mb-5">
+        <label className="block mb-2">Limite de Potência Máxima (W):</label>
+        <div className="flex items-center justify-between">
+          <input
+            type="range"
+            min="1000"
+            max="10000"
+            className="flex-1"
+            value={powerLimit}
+            onChange={handlePowerLimitChange}
           />
           <span>{powerLimit} W</span>
         </div>
       </div>
 
-      <div className="settings-item">
-        <label>Limite de Consumo Total de Energia (kWh):</label>
-        <input 
-          type="number" 
-          min="0" 
-          value={energyLimit} 
-          onChange={handleEnergyLimitChange} 
+      <div className="mb-5">
+        <label className="block mb-2">Limite de Consumo Total de Energia (kWh):</label>
+        <input
+          type="number"
+          min="0"
+          className="w-full p-2 border rounded"
+          value={energyLimit}
+          onChange={handleEnergyLimitChange}
         />
       </div>
 
-      <div className="settings-item">
-        <label>Limite de Tempo de Carregamento (h):</label>
-        <input 
-          type="number" 
-          min="1" 
+      <div className="mb-5">
+        <label className="block mb-2">Limite de Tempo de Carregamento (h):</label>
+        <input
+          type="number"
+          min="1"
           max="24"
-          value={chargingTimeLimit} 
-          onChange={handleChargingTimeLimitChange} 
+          className="w-full p-2 border rounded"
+          value={chargingTimeLimit}
+          onChange={handleChargingTimeLimitChange}
         />
       </div>
 
-      <div className="settings-item">
-        <label>Limite de Temperatura Máxima do EVSE (ºC):</label>
-        <div className="slider-container">
-          <input 
-            type="range" 
-            min="60" 
-            max="80" 
-            value={temperatureLimit} 
-            onChange={handleTemperatureLimitChange} 
+      <div className="mb-5">
+        <label className="block mb-2">Limite de Temperatura Máxima do EVSE (ºC):</label>
+        <div className="flex items-center justify-between">
+          <input
+            type="range"
+            min="60"
+            max="80"
+            className="flex-1"
+            value={temperatureLimit}
+            onChange={handleTemperatureLimitChange}
           />
           <span>{temperatureLimit} ºC</span>
         </div>
       </div>
 
-      <button className="save-button">Salvar Configurações</button>
+      <button className="bg-green-600 text-white w-full mt-4 p-2 rounded hover:bg-green-700">Salvar Configurações</button>
     </div>
   );
 };