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}
+            <Checkbox
-            primaryAction={
+              edge="end"
-              <Button variant="outlined" startIcon={<DeleteIcon />}>
+              onChange={() => onChecked(m)}
-                Delete
+              checked={m.approvato}
-              </Button>
+              inputProps={{ "aria-labelledby": labelId }}
-            }
+            />
-            secondaryAction={
+
-              <Checkbox
+            <div
-                edge="end"
+              style={{
-                onChange={() => onChecked(m)}
+                background: `url("${m.immagineURL}")`,
-                checked={m.approvato}
+                backgroundSize: "cover",
-                inputProps={{ "aria-labelledby": labelId }}
+                width: 50,
-              />
+                height: 50,
-            }
+              }}
-            disablePadding
+            />
-          >
+
-            <ListItemButton>
+            <p
-              {m.immagineURL && (
+              style={{ maxWidth: 200, width: 200 }}
-                <img src={m.immagineURL} style={{ width: 50 }} />
+            >{`"${m.testo}" da ${m.autore}`}</p>
-              )}
+            <IconButton
-              <ListItemText
+              variant="outlined"
-                id={labelId}
+              onClick={() => {
-                primary={`"${m.testo}" da ${m.autore}`}
+                firebase
-              />
+                  .database()
-            </ListItemButton>
+                  .ref("messaggi/" + m.id)
-          </ListItem>
+                  .remove();
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Stack>
         );
       })}
-    </List>
+    </Stack>
   );
 }