aboutsummaryrefslogtreecommitdiffstats
path: root/panel/src
diff options
context:
space:
mode:
Diffstat (limited to 'panel/src')
-rw-r--r--panel/src/pages/ManageAds.css63
-rw-r--r--panel/src/pages/ManageAds.jsx71
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>
);
};
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2024-10-17 06:28:38 +0000