بوت 3
import React, { useState } from 'react';
export default function App() {
const [videoLink, setVideoLink] = useState('');
const [videos, setVideos] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const handleAddVideo = (e) => {
e.preventDefault();
if (!videoLink.trim()) {
setError('Please enter a valid video link');
return;
}
setIsLoading(true);
setError('');
// Simulate processing the video link
setTimeout(() => {
// Validate URL format
try {
new URL(videoLink);
const newVideo = {
id: Date.now(),
url: videoLink,
title: `Video ${videos.length + 1}`,
thumbnail: `https://placehold.co/320x180/3b82f6/ffffff?text=Video+${videos.length + 1}`,
addedDate: new Date().toLocaleDateString(),
status: 'Added (Demo)'
};
setVideos([...videos, newVideo]);
setVideoLink('');
setIsLoading(false);
} catch (err) {
setError('Please enter a valid URL');
setIsLoading(false);
}
}, 1000);
};
const handleRemoveVideo = (id) => {
setVideos(videos.filter(video => video.id !== id));
};
return (
{/* Header */}
{/* Main Content */}
{/* Video Input Form */}
{/* Videos Grid */}
) : (
{/* Footer */}
);
}
Video Blogger
Manage your video collection
Add Video Link
Note: This is a demonstration tool. In a real application, downloading videos from other websites may violate their terms of service and copyright laws.
Your Videos ({videos.length})
{videos.length === 0 ? (No videos yet
Add your first video link above to get started
{videos.map((video) => (
))}
)}
{video.title}
{video.url}
Added: {video.addedDate}
{video.status}
تعليقات
إرسال تعليق