updated css for ManageAds.jsx

1 files changed, 40 insertions, 31 deletions

diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
index 9f6e28c..397315b 100644
--- a/panel/src/pages/ManageAds.jsx
+++ b/panel/src/pages/ManageAds.jsx
@@ -61,7 +61,9 @@ const ManageAds = () => {
 
   const handleDeleteAd = async (id) => {
     await deleteDoc(doc(db, 'ads', id));
-    setAds(ads.filter(ad => ad.id !== id));
+    const querySnapshot = await getDocs(collection(db, 'ads'));
+    const adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+    setAds(adsList);
   };
 
   const handleEditAd = (ad) => {
@@ -73,57 +75,64 @@ const ManageAds = () => {
   };
 
   return (
-    <>
+    <div className="manage-ads">
       <Navbar />
-      <Container className="manage-ads">
+      <Container className="manage-ads-container">
         <Typography variant="h4" className="manage-ads-header">Manage Ads</Typography>
-        <Button variant="contained" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
-        <Dialog open={open} onClose={() => setOpen(false)}>
-          <Box className="add-ad-dialog">
+        <Button variant="contained" color="primary" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
+        <Box className="manage-ads-list">
+          {ads.map(ad => (
+            <Box key={ad.id} className="ad-item">
+              {ad.fileURL && (ad.fileURL.includes('.mp4') ? (
+                <video src={ad.fileURL} controls className="ad-item-media" />
+              ) : (
+                <img src={ad.fileURL} alt={ad.name} className="ad-item-media" />
+              ))}
+              <Box>
+                <Typography variant="h6">{ad.name}</Typography>
+                <Typography>{ad.description}</Typography>
+              </Box>
+              <Box className="ad-item-actions">
+                <IconButton onClick={() => handleEditAd(ad)}>
+                  <EditIcon />
+                </IconButton>
+                <IconButton onClick={() => handleDeleteAd(ad.id)}>
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Dialog open={open} onClose={() => setOpen(false)} className="add-ad-dialog">
+          <Box p={2}>
+            <Typography variant="h6">{editAdId ? 'Edit Ad' : 'Add New Ad'}</Typography>
             <TextField
               label="Ad Name"
               value={adName}
               onChange={(e) => setAdName(e.target.value)}
               fullWidth
+              margin="normal"
             />
             <TextField
               label="Ad Description"
               value={adDescription}
               onChange={(e) => setAdDescription(e.target.value)}
               fullWidth
+              margin="normal"
+              multiline
+              rows={4}
             />
             <input
               type="file"
               onChange={(e) => setFile(e.target.files[0])}
             />
-            <Button onClick={handleAddAd}>Upload Ad</Button>
+            <Button variant="contained" color="primary" onClick={handleAddAd} fullWidth>
+              {editAdId ? 'Update Ad' : 'Add Ad'}
+            </Button>
           </Box>
         </Dialog>
-        <Box className="manage-ads-list">
-          {ads.map(ad => (
-            <Box key={ad.id} className="ad-item">
-              <Box className="ad-item-content">
-                <Typography variant="h6">{ad.name}</Typography>
-                <Typography variant="body1">{ad.description}</Typography>
-                {ad.fileURL && (
-                  ad.fileURL.includes('image') ?
-                  <img src={ad.fileURL} alt={ad.name} /> :
-                  <video src={ad.fileURL} controls />
-                )}
-              </Box>
-              <Box className="ad-item-actions">
-                <IconButton onClick={() => handleEditAd(ad)}>
-                  <EditIcon />
-                </IconButton>
-                <IconButton onClick={() => handleDeleteAd(ad.id)}>
-                  <DeleteIcon />
-                </IconButton>
-              </Box>
-            </Box>
-          ))}
-        </Box>
       </Container>
-    </>
+    </div>
   );
 };