diff options
| -rw-r--r-- | panel/src/pages/ManageAds.css | 63 | ||||
| -rw-r--r-- | panel/src/pages/ManageAds.jsx | 71 |
2 files changed, 91 insertions, 43 deletions
diff --git a/panel/src/pages/ManageAds.css b/panel/src/pages/ManageAds.css index f6d805e..2887b15 100644 --- a/panel/src/pages/ManageAds.css +++ b/panel/src/pages/ManageAds.css @@ -1,9 +1,20 @@ +:root { + --primary-color: #4caf50; + --secondary-color: #ffffff; + --background-color: #f4f7fc; + --text-color: #333; + --text-light-color: #666; + --shadow-color: rgba(0, 0, 0, 0.1); + --border-radius: 10px; +} + .manage-ads { display: flex; flex-direction: column; align-items: center; - background-color: #f4f7fc; + background-color: var(--background-color); min-height: 100vh; + padding: 20px; } .manage-ads-container { @@ -11,9 +22,9 @@ max-width: 1200px; margin-top: 20px; padding: 20px; - background-color: white; - border-radius: 10px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + background-color: var(--secondary-color); + border-radius: var(--border-radius); + box-shadow: 0 0 20px var(--shadow-color); } .manage-ads-header { @@ -23,7 +34,7 @@ .manage-ads-header h4 { font-size: 28px; - color: #333; + color: var(--text-color); } .manage-ads-list { @@ -37,20 +48,26 @@ align-items: center; padding: 15px; margin-bottom: 15px; - background-color: #f9fafc; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background-color: var(--secondary-color); + border-radius: var(--border-radius); + box-shadow: 0 2px 10px var(--shadow-color); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.ad-item:hover { + transform: translateY(-5px); + box-shadow: 0 4px 20px var(--shadow-color); } .ad-item h6 { font-size: 18px; - color: #333; + color: var(--text-color); margin: 0; } .ad-item p { font-size: 14px; - color: #666; + color: var(--text-light-color); margin: 0; } @@ -58,7 +75,7 @@ .ad-item video { width: 100px; height: auto; - border-radius: 10px; + border-radius: var(--border-radius); margin-right: 15px; } @@ -75,7 +92,7 @@ } .ad-item-actions button svg { - fill: #333; + fill: var(--text-color); } .add-ad-button { @@ -94,3 +111,25 @@ .add-ad-dialog button { margin-top: 20px; } + +@media (max-width: 768px) { + .manage-ads-container { + padding: 10px; + } + + .ad-item { + flex-direction: column; + align-items: flex-start; + } + + .ad-item img, + .ad-item video { + width: 100%; + margin-bottom: 10px; + } + + .ad-item-actions { + width: 100%; + justify-content: flex-end; + } +} 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> ); }; |