1 files changed, 67 insertions, 0 deletions
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;