6 files changed, 197 insertions, 0 deletions
diff --git a/src/components/AdCard.jsx b/src/components/AdCard.jsx
new file mode 100644
index 0000000..6e854ed
--- /dev/null
+++ b/src/components/AdCard.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const AdCard = ({ ad }) => {
+  return (
+    <div>
+      <h2>{ad.title}</h2>
+      <p>{ad.description}</p>
+      <img src={ad.image} alt={ad.title} />
+    </div>
+  );
+};
+
+export default AdCard;
diff --git a/src/components/AdForm.jsx b/src/components/AdForm.jsx
new file mode 100644
index 0000000..3274803
--- /dev/null
+++ b/src/components/AdForm.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+const AdForm = ({ onAddAd }) => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [image, setImage] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAddAd({ title, description, image });
+    setTitle('');
+    setDescription('');
+    setImage('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="Title"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <textarea
+        placeholder="Description"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+      <input
+        type="text"
+        placeholder="Image URL"
+        value={image}
+        onChange={(e) => setImage(e.target.value)}
+      />
+      <button type="submit">Add Ad</button>
+    </form>
+  );
+};
+
+export default AdForm;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..9862d29
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+  return (
+    <nav>
+      <Link to="/dashboard">Dashboard</Link>
+      <Link to="/manage-ads">Manage Ads</Link>
+      <Link to="/logout">Logout</Link>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx
new file mode 100644
index 0000000..531feda
--- /dev/null
+++ b/src/components/UploadForm.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
+import { storage } from '../firebase';
+
+const UploadForm = ({ onUploadComplete }) => {
+  const [file, setFile] = useState(null);
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+  };
+
+  const handleUpload = () => {
+    if (!file) return;
+
+    const storageRef = ref(storage, `ads/${file.name}`);
+    const uploadTask = uploadBytesResumable(storageRef, file);
+
+    uploadTask.on('state_changed',
+      (snapshot) => {
+        // Observe state change events such as progress, pause, and resume
+      },
+      (error) => {
+        console.error('Upload error:', error);
+      },
+      () => {
+        // Handle successful uploads on complete
+        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
+          onUploadComplete(downloadURL);
+        });
+      }
+    );
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleFileChange} />
+      <button onClick={handleUpload}>Upload</button>
+    </div>
+  );
+};
+
+export default UploadForm;
diff --git a/src/components/ViewAds.css b/src/components/ViewAds.css
new file mode 100644
index 0000000..ec1ccf6
--- /dev/null
+++ b/src/components/ViewAds.css
@@ -0,0 +1,21 @@
+.ads-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.ad-item {
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+video {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx
new file mode 100644
index 0000000..e681989
--- /dev/null
+++ b/src/components/ViewAds.jsx
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { getDownloadURL, listAll, ref } from 'firebase/storage';
+import { storage } from '../firebase';
+import './ViewAds.css';
+
+const ViewAds = () => {
+  const [urls, setUrls] = useState([]);
+
+  useEffect(() => {
+    const fetchUrls = async () => {
+      const listRef = ref(storage, 'ads/');
+      try {
+        const res = await listAll(listRef);
+        const urlsPromises = res.items.map(itemRef => getDownloadURL(itemRef));
+        const urls = await Promise.all(urlsPromises);
+        setUrls(urls);
+      } catch (error) {
+        console.error('Error fetching URLs:', error);
+      }
+    };
+
+    fetchUrls();
+  }, []);
+
+  const getFileType = (url) => {
+    const fileExtension = url.split('?')[0].split('.').pop().toLowerCase();
+    const imageExtensions = ['jpeg', 'jpg', 'gif', 'png'];
+    const videoExtensions = ['mp4', 'mov', 'avi', 'mkv'];
+
+    if (imageExtensions.includes(fileExtension)) {
+      return 'image';
+    } else if (videoExtensions.includes(fileExtension)) {
+      return 'video';
+    } else {
+      return 'unsupported';
+    }
+  };
+
+  return (
+    <div>
+      <h2>Uploaded Ads</h2>
+      <div className="ads-container">
+        {urls.map((url, index) => {
+          const fileType = getFileType(url);
+          console.log(`URL: ${url}, fileType: ${fileType}`);
+
+          return (
+            <div key={index} className="ad-item">
+              {fileType === 'image' ? (
+                <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} />
+              ) : fileType === 'video' ? (
+                <video controls style={{ maxWidth: '100%', height: 'auto' }}>
+                  <source src={url} type={`video/${url.split('.').pop()}`} />
+                  Your browser does not support the video tag.
+                </video>
+              ) : (
+                <p>Unsupported file type</p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ViewAds;