1 files changed, 35 insertions, 16 deletions
diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx
index 719d1b2..0c5486c 100644
--- a/src/components/ViewAds.jsx
+++ b/src/components/ViewAds.jsx
@@ -1,30 +1,49 @@
-import React, { useEffect, useState } from 'react';
-import { ref, listAll, getDownloadURL } from 'firebase/storage';
+import React, { useState, useEffect } from 'react';
+import './ViewAds.css';
+import { getDownloadURL, listAll, ref } from 'firebase/storage';
 import { storage } from '../firebase';
 
 const ViewAds = () => {
-  const [ads, setAds] = useState([]);
+  const [urls, setUrls] = useState([]);
 
   useEffect(() => {
-    const fetchAds = async () => {
-      const adsRef = ref(storage, 'ads/');
-      const adList = await listAll(adsRef);
-      const adUrls = await Promise.all(adList.items.map((item) => getDownloadURL(item)));
-      setAds(adUrls);
+    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);
+      }
     };
 
-    fetchAds();
+    fetchUrls();
   }, []);
 
   return (
     <div>
-      <h2>View Ads</h2>
-      <div>
-        {ads.map((url, index) => (
-          <div key={index}>
-            <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '200px' }} />
-          </div>
-        ))}
+      <h2>Uploaded Ads</h2>
+      <div className="ads-container">
+        {urls.map((url, index) => {
+          const isImage = url.match(/\.(jpeg|jpg|gif|png)$/);
+          const isVideo = url.match(/\.(mp4|mov|avi|mkv)$/);
+          return (
+            <div key={index} className="ad-item">
+              {isImage ? (
+                <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} />
+              ) : isVideo ? (
+                <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>
   );