import { useState } from "react"; export default function App() { const [videos, setVideos] = useState([ { id: 1, title: "Mi primer video", channel: "Carlos", url: "https://www.w3schools.com/html/mov_bbb.mp4", likes: 0 } ]); const [selectedVideo, setSelectedVideo] = useState(videos[0]); const [newTitle, setNewTitle] = useState(""); const [newUrl, setNewUrl] = useState(""); function uploadVideo() { if (!newTitle || !newUrl) return; const video = { id: Date.now(), title: newTitle, channel: "Mi canal", url: newUrl, likes: 0 }; setVideos([video, ...videos]); setNewTitle(""); setNewUrl(""); } function likeVideo() { setVideos( videos.map((video) => video.id === selectedVideo.id ? { ...video, likes: video.likes + 1 } : video ) ); setSelectedVideo({ ...selectedVideo, likes: selectedVideo.likes + 1 }); } return (

▶ MiTube

); } const styles = { app: { fontFamily: "Arial, sans-serif", background: "#f5f5f5", minHeight: "100vh" }, header: { background: "#ffffff", padding: "15px 30px", display: "flex", alignItems: "center", gap: "30px", borderBottom: "1px solid #ddd" }, search: { flex: 1, padding: "10px", fontSize: "16px" }, container: { display: "flex", padding: "25px", gap: "25px" }, main: { flex: 3 }, player: { width: "100%", maxHeight: "600px", background: "black" }, sidebar: { flex: 1, background: "white", padding: "15px" }, videoCard: { padding: "12px", marginBottom: "10px", border: "1px solid #ddd", cursor: "pointer", borderRadius: "8px" } };

▶ MiTube

{selectedVideo.title}

Subir un video

Mini Video Platform