fixed admin

src/index.js

@@ -1,3 +1,4 @@
+import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import "./App.css";
 import React from "react";
@@ -14,6 +15,8 @@ import Checkbox from "@mui/material/Checkbox";
 import { Proiezione } from "./Proiezione";
 import { MyForm } from "./MyForm";
 import { Admin } from "./Admin";
+import { Button } from "@mui/material";
+import { Stack } from "@mui/system";
 
 const firebaseConfig = {
   apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
@@ -30,43 +33,45 @@ firebase.initializeApp(firebaseConfig);
 
 export function CheckboxListSecondary({ messaggi, onChecked }) {
   return (
-    <List
-      dense
-      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
-    >
+    <Stack spacing={4}>
       {messaggi.map((m) => {
         const labelId = `checkbox-list-secondary-label-${m.timestamp}`;
         return (
-          <ListItem
-            key={m.timestamp}
-            primaryAction={
-              <Button variant="outlined" startIcon={<DeleteIcon />}>
-                Delete
-              </Button>
-            }
-            secondaryAction={
+          <Stack spacing={3} direction="row" key={m.timestamp}>
             <Checkbox
               edge="end"
               onChange={() => onChecked(m)}
               checked={m.approvato}
               inputProps={{ "aria-labelledby": labelId }}
             />
-            }
-            disablePadding
-          >
-            <ListItemButton>
-              {m.immagineURL && (
-                <img src={m.immagineURL} style={{ width: 50 }} />
-              )}
-              <ListItemText
-                id={labelId}
-                primary={`"${m.testo}" da ${m.autore}`}
+
+            <div
+              style={{
+                background: `url("${m.immagineURL}")`,
+                backgroundSize: "cover",
+                width: 50,
+                height: 50,
+              }}
             />
-            </ListItemButton>
-          </ListItem>
+
+            <p
+              style={{ maxWidth: 200, width: 200 }}
+            >{`"${m.testo}" da ${m.autore}`}</p>
+            <IconButton
+              variant="outlined"
+              onClick={() => {
+                firebase
+                  .database()
+                  .ref("messaggi/" + m.id)
+                  .remove();
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Stack>
         );
       })}
-    </List>
+    </Stack>
   );
 }