diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AdCard.jsx | 13 | ||||
-rw-r--r-- | src/components/AdForm.jsx | 40 | ||||
-rw-r--r-- | src/components/Navbar.jsx | 14 | ||||
-rw-r--r-- | src/components/UploadForm.jsx | 42 | ||||
-rw-r--r-- | src/components/ViewAds.css | 21 | ||||
-rw-r--r-- | src/components/ViewAds.jsx | 67 |
6 files changed, 0 insertions, 197 deletions
diff --git a/src/components/AdCard.jsx b/src/components/AdCard.jsx deleted file mode 100644 index 6e854ed..0000000 --- a/src/components/AdCard.jsx +++ /dev/null @@ -1,13 +0,0 @@ -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 deleted file mode 100644 index 3274803..0000000 --- a/src/components/AdForm.jsx +++ /dev/null @@ -1,40 +0,0 @@ -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 deleted file mode 100644 index 9862d29..0000000 --- a/src/components/Navbar.jsx +++ /dev/null @@ -1,14 +0,0 @@ -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 deleted file mode 100644 index 531feda..0000000 --- a/src/components/UploadForm.jsx +++ /dev/null @@ -1,42 +0,0 @@ -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 deleted file mode 100644 index ec1ccf6..0000000 --- a/src/components/ViewAds.css +++ /dev/null @@ -1,21 +0,0 @@ -.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 deleted file mode 100644 index e681989..0000000 --- a/src/components/ViewAds.jsx +++ /dev/null @@ -1,67 +0,0 @@ -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; |