new project

1 files changed, 70 insertions, 0 deletions

diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
new file mode 100644
index 0000000..4ec0b36
--- /dev/null
+++ b/panel/src/pages/ManageAds.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../firebase';
+import { collection, addDoc, getDocs } from 'firebase/firestore';
+
+const ManageAds = () => {
+  const [ads, setAds] = useState([]);
+  const [newAd, setNewAd] = useState({ title: '', description: '', imageUrl: '' });
+
+  useEffect(() => {
+    fetchAds();
+  }, []);
+
+  const fetchAds = async () => {
+    const querySnapshot = await getDocs(collection(db, 'ads'));
+    const adsData = querySnapshot.docs.map(doc => doc.data());
+    setAds(adsData);
+  };
+
+  const handleAddAd = async () => {
+    await addDoc(collection(db, 'ads'), newAd);
+    fetchAds();
+  };
+
+  return (
+    <div className="container">
+      <h4>Manage Ads</h4>
+      <div className="mb-4">
+        <div className="mb-3">
+          <label>Title</label>
+          <input
+            type="text"
+            value={newAd.title}
+            onChange={(e) => setNewAd({ ...newAd, title: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <div className="mb-3">
+          <label>Description</label>
+          <input
+            type="text"
+            value={newAd.description}
+            onChange={(e) => setNewAd({ ...newAd, description: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <div className="mb-3">
+          <label>Image URL</label>
+          <input
+            type="text"
+            value={newAd.imageUrl}
+            onChange={(e) => setNewAd({ ...newAd, imageUrl: e.target.value })}
+            className="form-control"
+          />
+        </div>
+        <button onClick={handleAddAd} className="btn btn-primary">Add Ad</button>
+      </div>
+      <div>
+        {ads.map((ad, index) => (
+          <div key={index} className="mb-3">
+            <h5>{ad.title}</h5>
+            <p>{ad.description}</p>
+            <img src={ad.imageUrl} alt={ad.title} className="img-fluid" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ManageAds;