{video.title}

{video.description}

\n 🎬 Video Playback Placeholder\n

\n );\n}\n\nfunction App() {\n const [selectedVideo, setSelectedVideo] = useState(null);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [filter, setFilter] = useState(\"all\");\n\n const filteredContent = MOCK_CONTENT.filter(content =>\n content.title.toLowerCase().includes(searchTerm.toLowerCase())\n && (filter === \"all\" || content.type === filter)\n );\n\n return (\n

🎥 Hotstar Clone

\n setSearchTerm(e.target.value)}\n />\n

\n \n \n \n

\n\n {selectedVideo && }\n\n

\n {filteredContent.map(content => (\n setSelectedVideo(content)}\n >\n \n

{content.title}

{content.genre.join(\", \")} • {content.year}

\n ))}\n

\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Hotstar Clone\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n background-color: #121212;\n color: white;\n margin: 0;\n padding: 20px;\n}\n\n.hotstar-clone {\n max-width: 1200px;\n margin: 0 auto;\n}\n\nheader {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 20px;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n background-color: #222;\n border: none;\n color: white;\n}\n\n.filters {\n display: flex;\n gap: 10px;\n}\n\n.filters button {\n background-color: #333;\n color: white;\n border: none;\n padding: 5px 10px;\n cursor: pointer;\n}\n\n.content-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 20px;\n}\n\n.content-card {\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.content-card:hover {\n transform: scale(1.05);\n}\n\n.content-card img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n}\n\n.video-player {\n margin-bottom: 20px;\n text-align: center;\n}\n\n.mock-video-placeholder {\n background-color: #333;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n}\n\nfooter a {\n color: #666;\n text-decoration: none;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Hotstar/hotstarClone/code/main.tsx","extension","actionData","errors"]