إضافة فيديو جديد

\n setFile(e.target.files[0])}\n />\n

setDescription(e.target.value)}\n          />\n          <div className=\"modal-actions\">\n            <button type=\"submit\">رفع الفيديو</button>\n            <button type=\"button\" onClick={onClose}>إلغاء</button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n\nfunction VideoCard({ video }) {\n  const [likes, setLikes] = useState(video.likes);\n  const [isLiked, setIsLiked] = useState(false);\n\n  const handleLike = () => {\n    setLikes(isLiked ? likes - 1 : likes + 1);\n    setIsLiked(!isLiked);\n  };\n\n  return (\n    <div className=\"video-card\">\n      <div className=\"video-container\">\n        <div className=\"floating-icons\">\n          <button onClick={handleLike} className={`like-btn ${isLiked ? 'liked' : ''}`}>\n            ❤️ {likes}\n          </button>\n          <button className=\"comment-btn\">💬 {video.comments}</button>\n          <button className=\"share-btn\">🔗</button>\n          <button className=\"send-btn\">📤</button>\n        </div>\n        <div className=\"video-placeholder\">\n          <span>📹 فيديو غير متاح</span>\n        </div>\n      </div>\n      <div className=\"video-actions\">\n        <div className=\"user-info\">\n          <span>@{video.user}</span>\n          <p>{video.description}</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction App() {\n  const [videos, setVideos] = useState(mockVideos);\n  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);\n\n  const handleVideoUpload = (newVideo) => {\n    const uploadedVideo = {\n      id: videos.length + 1,\n      user: \"المستخدم الحالي\",\n      videoUrl: URL.createObjectURL(newVideo.file),\n      likes: 0,\n      comments: 0,\n      description: newVideo.description\n    };\n    setVideos([...videos, uploadedVideo]);\n  };\n\n  return (\n    <div className=\"app-container\">\n      <header>\n        <h1>تطبيق سعد 🎥</h1>\n      </header>\n      <div className=\"video-feed\">\n        {videos.map(video => (\n          <VideoCard key={video.id} video={video} />\n        ))}\n      </div>\n      <button \n        className=\"add-video-btn\" \n        onClick={() => setIsUploadModalOpen(true)}\n      >\n        ➕ إضافة فيديو\n      </button>\n      <VideoUploadModal \n        isOpen={isUploadModalOpen}\n        onClose={() => setIsUploadModalOpen(false)}\n        onUpload={handleVideoUpload}\n      />\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>تطبيق سعد</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f0f0f0;\n  margin: 0;\n  padding: 0;\n  direction: rtl;\n}\n\n.app-container {\n  max-width: 600px;\n  margin: 0 auto;\n  background-color: white;\n  position: relative;\n}\n\nheader {\n  text-align: center;\n  padding: 15px;\n  background-color: #4a4a4a;\n  color: white;\n}\n\n.video-feed {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 15px;\n}\n\n.video-card {\n  border: 1px solid #e0e0e0;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.video-container {\n  position: relative;\n}\n\n.floating-icons {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  z-index: 10;\n}\n\n.floating-icons button {\n  background-color: rgba(255,255,255,0.7);\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  cursor: pointer;\n}\n\n.video-placeholder {\n  width: 100%;\n  height: 400px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f0f0f0;\n  font-size: 18px;\n}\n\n.video-actions {\n  padding: 15px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.like-btn.liked {\n  color: red;\n}\n\n.add-video-btn {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: #4a4a4a;\n  color: white;\n  border: none;\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.2);\n  cursor: pointer;\n  z-index: 100;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0,0,0,0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 200;\n}\n\n.modal-content {\n  background-color: white;\n  padding: 20px;\n  border-radius: 10px;\n  width: 90%;\n  max-width: 400px;\n}\n\n.modal-content form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.modal-content input, \n.modal-content textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n}\n\n.modal-actions {\n  display: flex;\n  justify-content: space-between;\n}\n\n.modal-actions button {\n  padding: 10px 20px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n`;","deleted","label","children",[],[152],"files",[150],"counts",{"_173":32,"_174":175,"_176":32,"_177":32},"pulls","branches",1,"forks","envVars","contents",[180],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":182},["D",1734123729687],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":192,"_178":197,"_200":-7,"_201":-5,"_202":-5,"_169":203,"_207":208},{"_102":103,"_95":96,"_104":193,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":194,"_132":195,"_135":196,"_147":22},["D",1746129757334],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[198],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":199},[152],"readme","upstream","pull",[204],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":158,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_166":205,"_98":206},[],[152],"previews",[204],"actionData","errors"]
</article></body></html>

saadstore

pioneeringAzurePenguin