From 881445590edf7c962e9b0fb185fb50cc5c4b3980 Mon Sep 17 00:00:00 2001
From: RouxAntoine <antoinroux@hotmail.fr>
Date: Wed, 26 Jul 2023 20:03:12 +0200
Subject: [PATCH] feature use some material component

---
 src/main/resources/public/src/ListData.js     | 32 +++++++++++++++----
 .../resources/public/src/NodesComponent.js    |  4 +--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/public/src/ListData.js b/src/main/resources/public/src/ListData.js
index 3f4ca4f..598f332 100644
--- a/src/main/resources/public/src/ListData.js
+++ b/src/main/resources/public/src/ListData.js
@@ -2,12 +2,30 @@
 
 function ListData({datas}) {
     return (
-        <div>
-            {
-                datas.map((data, index) =>
-                    <div key={index}>{data.name}</div>
-                )
-            }
-        </div>
+        <MaterialUI.List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
+            {datas.map((data, index) =>
+                <div key={index}>
+                    <MaterialUI.ListItem alignItems="flex-start">
+                        <MaterialUI.ListItemText
+                            primary={`Node ${data.name}`}
+                            secondary={
+                                <React.Fragment>
+                                    <MaterialUI.Typography
+                                        sx={{display: 'inline'}}
+                                        component="span"
+                                        variant="body2"
+                                        color="text.primary"
+                                    >
+                                        to Scott, Alex, Jennifer
+                                    </MaterialUI.Typography>
+                                    {" — Wish I could come, but I'm out of town this…"}
+                                </React.Fragment>
+                            }
+                        />
+                    </MaterialUI.ListItem>
+                    {( index !== datas.length -1 ? <MaterialUI.Divider variant="inset" component="li"/> : '' )}
+                </div>
+            )}
+        </MaterialUI.List>
     )
 }
diff --git a/src/main/resources/public/src/NodesComponent.js b/src/main/resources/public/src/NodesComponent.js
index bf5bd12..2a02d8a 100644
--- a/src/main/resources/public/src/NodesComponent.js
+++ b/src/main/resources/public/src/NodesComponent.js
@@ -13,9 +13,9 @@ function Nodes({criteria}) {
     }, [criteria]);
 
     return (
-        <div>
+        <MaterialUI.Card variant="outlined">
             <div>nodes</div>
             <ListData datas={nodes}/>
-        </div>
+        </MaterialUI.Card>
     );
 }