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
+    <Stack spacing={4}>
-      dense
-      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
-    >
       {messaggi.map((m) => {
         const labelId = `checkbox-list-secondary-label-${m.timestamp}`;
         return (
-          <ListItem
+          <Stack spacing={3} direction="row" key={m.timestamp}>
-            key={m.timestamp}
-            primaryAction={
-              <Button variant="outlined" startIcon={<DeleteIcon />}>
-                Delete
-              </Button>
-            }
-            secondaryAction={
             <Checkbox
               edge="end"
               onChange={() => onChecked(m)}
               checked={m.approvato}
               inputProps={{ "aria-labelledby": labelId }}
             />
-            }
+
-            disablePadding
+            <div
-          >
+              style={{
-            <ListItemButton>
+                background: `url("${m.immagineURL}")`,
-              {m.immagineURL && (
+                backgroundSize: "cover",
-                <img src={m.immagineURL} style={{ width: 50 }} />
+                width: 50,
-              )}
+                height: 50,
-              <ListItemText
+              }}
-                id={labelId}
-                primary={`"${m.testo}" da ${m.autore}`}
             />
-            </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>
   );
 }