clean css

resources/js/components/rainfall/LastFiveMesure.tsx

@@ -2,6 +2,7 @@ import React, {FC, useEffect, useState} from "react"
 import useAxiosTools from "../../hooks/AxiosTools";
 import {rainfall} from "../../types";
 import {AxiosError} from "axios";
+import Card from "../Card";
 
 const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
 
@@ -25,16 +26,18 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
         }
     }
 
-    return <div>
-        <h1>5 dernières mesures</h1>
+    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+        <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1">5 dernières mesures</h1>
         {error && <div>{error}</div>}
-        <ul>
-            {data.map(line => <li key={line.id} className="w-36 flex justify-between">
-                <span>{(new Date(line.date)).toLocaleDateString()}</span>
-                <span>{line.value}</span>
-            </li>)}
-        </ul>
-    </div>
+        <table className="w-full text-center">
+            <tbody>
+                {data.map(line => <tr key={line.id} className="">
+                    <td>{(new Date(line.date)).toLocaleDateString()}</td>
+                    <td className="text-right px-2">{line.value}</td>
+                </tr>)}
+            </tbody>
+        </table>
+    </Card>
 }
 
 export default LastFiveMesure